Modifying a few things in the Venture/theme?

abriangillespie · Member · May 4, 2017 at 4:46 pm
Copy link

Add topic to favorites
Front/Main Page:

1) Reduce height of – Top/Main, Service & Work – images/boxes … by 25%

2) Need to add the word “Services” above the (3) service text/boxes.

3) The space above/below “intro text” (“Designing Business is a global … “) needs to be reduced/less. (50%)

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 5, 2017 at 6:10 am
Copy link
Hi there,

1) Reduce height of – Top/Main, Service & Work – images/boxes … by 25%

Can you be a bit more specific on this?

2) Need to add the word “Services” above the (3) service text/boxes.

Are you talking about the three child pages with the images? If so, the following will add “Services” above them and mimic the styling of Work in the section below.
```
.front-block-two {
	background: #fff !important;
}
.front-block-two:before {
	content: "Services";
	display: block;
	text-align: center;
	font-size: 22.4px;
	margin-bottom: 30px
}
```
3) The space above/below “intro text” (“Designing Business is a global … “) needs to be reduced/less. (50%)

Add this. It was originally 130px top and bottom. You can adjust as you see fit.
```
.front-block-one {
	padding-top: 65px;
	padding-bottom: 65px;
	border-bottom: none;
}
```
abriangillespie · Member · May 5, 2017 at 3:09 pm
Copy link
re: *2) & 3) … Thank You!

1) All the images (on main page) are too tall – the “height” needs to be reduced by 25%
(i.e.: h = 100px > 75px)
abriangillespie · Member · May 5, 2017 at 3:21 pm
Copy link
“images” = Main/top image, the 3 under “Services” & 6 under “Work”
thesacredpath · Member · May 5, 2017 at 10:00 pm
Copy link
For the main top image, add the following and you can adjust the 50vh height and min-height as desired (it was 100vh). vh is vertical height.
```
#fullscreen-header, #fullscreen-header .featured-slide {
	min-height: 50vh !important;
	height: 50vh !important;
}
#page .has-background-cover {
	background-position-y: bottom;
}
```
For Services, this is about the best we can do due to the way the theme calculates the height of the divs those images are in. It is not a static height, but changes with window/screen width.
```
.front-block .grid-row .hentry .entry-header {
	padding: 20px;
}
.front-block .grid-row .featured-page-inner {
	max-height: 500px;
	height: 100% !important;
}
```
Under Work, if we make the images smaller, they might look a bit strange as the set of 6 will be much narrower than the window on computers. Add the following and you can adjust the max-width, which was originally 970px. I also included a rule for top and bottom padding. Both were originally 120px.
```
.portfolio-grid.container {
	max-width: 600px;
}
.front-block.front-porfolio {
	padding-top: 60px;
	padding-bottom: 60px;
}
```
abriangillespie · Member · May 6, 2017 at 12:05 am
Copy link
… closer!?
I just wanted a reduce/adjust the height, and leave the width as is. How about a fixed-width (as is), just shorter in height?
(*only reduce the H, in the current “W x H” image/frame ratios? Maybe?)

Thx!
abriangillespie · Member · May 8, 2017 at 9:14 pm
Copy link
Under > “Work” > 6x clients > Image/Box:
(*only reduce the H, in the current “W x H” image/frame ratios … Maybe?)
dcoleonline · Staff · May 10, 2017 at 8:01 pm
Copy link
Hi there,

@thesacredpath has been away for a few days, but I wanted to check in with you.

You can use this to change the height of the 6 “Work” images at the bottom of your home page:
```
/*Reduce height of Work images */

.home .portfolio-grid article {
    height: 150px;
    overflow: hidden;
}

/* Move link text up higher for Work images */

.home .portfolio-grid .hentry .entry-header a {
    top: -85px;
}
```
Based on thesacredpath’s earlier reply, the theme prevents doing more with the Services section, but let us know if you need something different for the main top image.

No items found.