Still struggling to get a full-width image

[mcafiero]

First, I saw this and it got me pretty close…

How to add full width image on homepage?

I decided that using my images as a background image wasn’t the solution because it didn’t seem responsive to smaller screen sizes.

So then I added an image element, but it won’t let me make my image large enough to go across the entire screen.

Any tips would be appreciated! Thanks

[deranaloge]

hi,

you heva tomake it this way:
add a new section
select layout with one column
then go to the row of the new element
and click: global container: OFF
then the row should be full witdh, now you can insert your element.

hope that helps.

cheers

[friech]

Hi Mark,

Thank you for writing in, first, please follow Harald instruction to turn OFF the Row’s Inner Container. This will make the ROW fullwidth.

Now, you need to make sure that your Image is big/wide enough to cover the entire section. Else, add this to your Image Element CSS area.

$el.x-image,
$el.x-image img {
	width: 100%;
}

This will stretch your image though so don’t overuse it, better if your image is wide enough in the first place, so you do not need to add that custom CSS.

Hope it helps,
Cheers!

[mcafiero]

managed to get it to work without the CSS. Thanks to everyone for your help. Cheers

[ruenel]

You’re most welcome!
It’s good to know that it has worked for you.