Is there a way to prevent the slider from zooming in on images?

[Allison Deerr]

Hi Bill! I’ve been using 1080 × 565 photos for the slider and the tops and bottoms are getting cut off for some reason. Is there a way to fix this so the photos display at the actual size? Thanks in advance!

[Bill Robbins]

Hi Allison,

Great question there. The recommended image size for the slider is 1140 pixels wide by 500 pixels tall. There is some flexibility in the height of the image, but you’ll get the best results by having the images be 1140 pixels wide.

That’s the width they will appear to be on the front end of the website. If they happen to be narrower than that, they will be stretched giving that zooming effect. It’ll also make them taller than expected since the height will grow proportionally with the width.

Give that a shot and let me know if you run into trouble or questions.

Have a great day,
Bill

[Allison Deerr]

Thanks, that worked! I’m running into another issue with the slider, however…

Some of the images I’m using are getting cut off in odd places by the captions. Is there a way to make the captions narrower or appear at the bottom of the photo instead of to the left or right so that faces of people in the photos aren’t being blocked by the caption box? I’m also having trouble figuring out how to change the sizes of the font in the caption box.

[Bill Robbins]

Hi Allison,

I’d be glad to take a look for you. What’s the URL to your site?

Bill

[Allison Deerr]

This reply has been marked as private.

[Bill Robbins]

Thanks Allison! Apologies for not getting to you earlier today. The video card in my MacBook Pro is dying and each time it acts up, the computer abruptly cuts off. It has wreaked havoc on my today.

You can make the caption area smaller. In the Customizer (Appearance > Customize in your WordPress dashboard) click on the advanced section and then Custom CSS. Add this there:

@media only screen and (min-width: 768px) {

	div.slide-box {
		width: 240px;
	}

}

and update your settings. That will change the width of the box for you. If you’d like to make it wider or more narrow you can change the 240px in the snippet above to a larger or smaller number.

You can also change the font sizes there. I don’t believe there is a built in control for that, but if you’ll add this to the Custom CSS too, it’ll let you change them:

.slide-box h2 {
	font-size: 20px;
}

.slide-box p {
	font-size: 14px;
}

The top style there is the heading and the second one will be for the main copy of the slide. Feel free to adjust those to fit. Both of those are smaller than the default ones are.

Let me know if you run into any questions or trouble there. If that doesn’t do the trick, we could use just the heading and position it near the bottom. That would cover up less of the image.

Thanks,
Bill

[Allison Deerr]

No worries, Bill! That fixed the issue. Thanks for the help!

[Bill Robbins]

Glad that did the trick Allison. Have a great weekend and let me know if you have any other questions.

[Author]

Posts