Adjusting Slider Height 2014 Theme

lilwan · Member · Jul 16, 2015 at 6:43 pm
Copy link

Add topic to favorites
Is it possible to reduce the slider height in 2014 Theme using CSS? Thank you for any help. Here is my site: http://thebipolarmaniac.com/

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 16, 2015 at 10:33 pm
Copy link
Hi, the Twenty Fourteen theme creates the images for the slider based on the original size/proportions of the space available to it. If we make the image shorter, then there will be a blank white space to the right of the image. You can add the following CSS to see what I mean.
```
.featured-content .post-thumbnail img {
    max-height: 350px;
    width: auto;
}
```
An alternative we could make the slider viewport shorter like this. The drawback though is it crops the image shorter.
```
.slider-viewport {
    max-height: 300px;
}
```
ehtis · Staff · Jul 16, 2015 at 11:03 pm
Copy link
Hmm, I was looking at this so thought to add my two cents as well:

As @thesacredpath said, reducing the slider height will crop the image. To compensate, If we only reduce image’s height, it will give a squeezed look. Code above with width: auto also adjusts its width to maintain the aspect ratio, so you get the white space as well.

In either case, image will have a distorted look and you will have to upload an image which fits the new slider’s height.

Now on to resizing. I’m also adding the code to move up the black heading box so it doesn’t get cropped if you reduce slider’s height:
```
.slider-viewport{
	height: 376px !important;
}

#featured-content .entry-header {
	height: 170px;
	margin-bottom: 200px;
}
```
@thesacredpath, a question — .slider-viewport seems to have the height property hard-coded in the HTML tag, so I thought !important would be required, no?
lilwan · Member · Jul 16, 2015 at 11:15 pm
Copy link
Hey guys! Thanks so much for the info! I’ll sit down and do some work with this info tonight. Thank you again. :)
thesacredpath · Member · Jul 17, 2015 at 12:37 am
Copy link
@lilwan, you are welcome.
thesacredpath · Member · Jul 17, 2015 at 12:39 am
Copy link
@ehtis, you made me go back and try it in a test site, and it works – in the case of Twenty Fourteen – without the !important keyword. You are right though, most of the time, perhaps the majority of the time it takes the keyword to override.
ehtis · Staff · Jul 17, 2015 at 1:49 pm
Copy link
Sorry if it caused trouble, actually Chrome’s Inspect Element debugger was not reflecting the change unless I added !important (which was expected because of HTML tag), so asked out of curiosity. Thanks for checking out.
thesacredpath · Member · Jul 17, 2015 at 8:31 pm
Copy link
@ehtis, hmmm, I didn’t check in Chrome, and you are right. I checked in the Customizer, using Chrome, and !important is required. Funny, I’ve never known Chrome to be pickier than Firefox.

Many thanks for catching that.
lilwan · Member · Jul 17, 2015 at 8:40 pm
Copy link
Hi guys, just wanted to update you on my experience with adjusting the slider. I played around with the dimension changes last night and found that it definitely was best left alone. 2014 is such an incredible theme, I’d only be doing disservice to my site and taking away from the amazing job the designers of the theme have done. Thank you genuinely for all your help.
thesacredpath · Member · Jul 17, 2015 at 10:02 pm
Copy link
You are welcome, and yes, Twenty Fourteen is an incredible theme.

No items found.