Hero Backstretch

Hi there,

I guess are you talking about the rotating text on Hero slideshow ? You can remove these text in Customizer => Hero content layout => Large text.

Let me know!

Hi! I’m actually talking about the effect on the Hero image. It stretches and zooms the image to a different size. I love the rotating text!

Oh sorry.

The hero image is always full screen, so the best size should be 1800x1200px. If you use small image, it will be stretches and zooms.

There must be a way to add a max-width and max-height option though, I am trying to work this out too. How did you go, @leahtams, did you work out how to do it?

@callmeivel I ended up doing some custom CSS to restrict the width and height. It didn’t completely get rid of the stretching, but it did significantly improve it. Here’s the CSS I used:

.hero-slideshow-wrapper {
	width: 70%;
	height: 500px;
	margin: auto;
	display: block;
	position: relative;
	overflow: hidden;
}

.hero-slideshow-normal .container {
	padding: 10% 0;
	position: relative;
	height: 500px;
	z-index: 80;
}

Of course, you can change the width and height to what works for you and your site–those are just the ones I picked. Also, if you are using something like the Page Builder plugin from Beaver Builder (or their Beaver Builder theme), the front page would be pretty easy to replicate.

• This reply was modified 8 years ago by leahtams.