Resize Feature Slider

saushaknott · Member · Mar 3, 2014 at 9:28 pm
Copy link

Add topic to favorites
I am trying to resize the featured post slider for the Twenty Fourteen theme. Is there anyone who knows how or has successfully done this? I do have the customize CSS ability.

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Mar 3, 2014 at 10:49 pm
Copy link
Featured content areas in themes (like that slider in Twenty Fourteen) generally use a hard coded image size. That makes them easy to resize so they’re smaller but hard to make them bigger because you’ll be stretching out the images and you take a hit in quality.

The slider already successfully resizes for small screen views though. What size were you going for?
saushaknott · Member · Mar 4, 2014 at 12:44 am
Copy link
I was going for just a smaller slider area in general. It looks too overwhelming in my opinion.
hfzrhmn · Member · Mar 4, 2014 at 8:23 am
Copy link
Just for fun I tried resizing the slider area’s height. What I found is that since the slider’s width is predetermined, decreasing the height means that the images get cropped. Try the following CSS to check (the changes only apply for screen resolution of 1080px wide and above):
```
@media screen and (min-width: 1080px) {
	.slider-control-paging li a:before {
		background: #fff;
	}
	.slider-viewport {
		height: 400px !important;
	}
	.slider .featured-content .entry-header {
		bottom: 170px;
		padding-bottom: 50px;
		background: rgba(255, 255, 255, 0.75);
	}
}
```
I’m not sure if that is the effect you want, but have a look at it first. If you want to change the height, you will have to play with both
.slider-viewport‘s height and .slider .featured-content .entry-header‘s bottom values.
saushaknott · Member · Mar 4, 2014 at 2:38 pm
Copy link
Thanks for the suggestion and code! I will give it a try.
livinghealthycommunity · Member · Mar 21, 2014 at 8:27 pm
Copy link
I tried this example above with adjustments to the numbers I want, but nothing changed on my blog.

My blog is livinghealthycommunity.wordpress.com.
thesacredpath · Member · Mar 24, 2014 at 4:12 pm
Copy link
@livinghealthycommunity, what are you wanting to do on your site specifically in regard to the slider?
livinghealthycommunity · Member · Mar 24, 2014 at 9:14 pm
Copy link
Hi,

I did figure out to change the size of the sliders. Here is the code that worked for me:
```
@media screen and (min-width: 673px) {
.slider .featured-content .hentry, .featured-content .slider-viewport {
height: 350px !important;
}
}
.featured-content .entry-header {
	height: relative;
}
```
My co-worker thinks a slide with less length (like 250px) would look better, but when I adjust the slider, it affects the featured image above the post.

I want to have the image look good in the slider as well as in the featured image when they click on the slide. I have images of people in some of my featured images. When they are in a slide, the title runs into their faces. If I create the image to be the same width and put the people on the left of the article titles then the featured image in the post crops their faces off.

Thank you for your your question and assistance.
thesacredpath · Member · Mar 24, 2014 at 11:27 pm
Copy link
This part of the CSS you have above
```
@media screen and (min-width: 673px) {
.slider .featured-content .hentry, .featured-content .slider-viewport {
height: 350px !important;
}
}
```
Is set to affect only the slider on the main page. When I go to a post page, such as Spring 2014 Editorial (from clicking on the slider image) a change in height in the above does not change that image.

On the titles on the featured slider on the main page, you can make the title smaller. On this title, “Natural Herbal Treatment of Bronchitis Without the use of Steroids or Other Drugs” you might consider shortening it to “Natural Treatment for Bronchitis”. “Natural” sort of implies without steroids or other drugs. For long titles, I don’t know that there is much way, other than making the title smaller, to work through that issue. No matter where you move the title though, it will likely still interfere with some images.
thesacredpath · Member · Mar 24, 2014 at 11:30 pm
Copy link
Try changing this:
```
.featured-content .entry-title a {
    height: 30px;
    width: 300px;
}
```
to this and see if that was what you were after for that rule.
```
.slider .featured-content .entry-title {
    width: 300px;
}
```
livinghealthycommunity · Member · Mar 25, 2014 at 1:02 pm
Copy link
Thank you for your input! I will try the CSS.

How would I set the css to affect both the featured image on the slider and the post so that they look good in both spots. I notice that the slider crops the bottom automatically on the image for the “Spring Editorial.” Then the image in the post looks very clear. Then the “Dear Valued Customers” image is the size I made in Photoshop, but when it goes to the Post, it crops it. Is there a way to affect both images at the same time or can I make the images separate and not connected to the other?
livinghealthycommunity · Member · Mar 25, 2014 at 1:07 pm
Copy link
I changed the post image with the code:

.wp-post-image, .post-thumbnail img {
height: 350px;
width: 600px;
}
It changes both the image on the slider and the image on the post.
thesacredpath · Member · Mar 25, 2014 at 4:49 pm
Copy link
Super! Your site is looking very good, and you are welcome.

No items found.