Widget Cropping

[Tammy Scott-Wigens]

Hi Bill,

Having some trouble with a widget cropping. The Mackage widget is cropping the background image. I’d like this image to look more like a Hero image/slide. It seems to be picking up the coding from the page cropping (40%, 60%). Is there not a way to have a full image further down the page or a way to code the row parameters?

Thanks,

Tammy

[Bill Robbins]

Good Morning Tammy,

Excellent question. You can have a full width and height row past the hero. What you’ll want to do is add the background to the row and not to a widget itself. For the background image size option, set it to “cover” which will make the row background always fill the available area.

After you add the background, look above the background section for a spot labeled “Attributes” and click on it. One of the options there is for “CSS Styles.” In that spot add this:

min-height: 100vh;

Save your changes. That should make the row full height and width. The image may crop a bit depending on how similar the image’s aspect ratio is to the browser window’s aspect ratio. The best way to counteract that is to keep the image’s main focus towards the center of the image so there is buffer around the top and sides.

Let me know how that goes,
Bill

[Author]

Posts