Streaming live at 10am (PST)

Change picture 100% screen wide in the responsive view

I’m trying to make the “WOW” picture look full-wide on mobile screen (100%) with no left/right margins, but I think I messed some values and I don’t know which ones I have to change to settle the new format. :thinking:

Here is my site Read-Only: [LINK]

Hi @aran_hrzn!

Its because your section has padding on left and right. Is just remove them.

Eve Kayser

1 Like

Thank you, @evekayser! That was an easy one :sweat_smile:

@evekayser If I wanted to make the container/picture as portrait instead of landscape, what should I do?

Sorry, what do you mean? could you send a screenshot as example please?

You can setup height but It will stretch your image. (not recommended)

  1. You could use one landscape image on desktop and another portrait image on mobile. But they should be different elements (desktop image set display:none on mobile and mobile image set display: none on desktop)

  2. You could use this image as a div block background using “cover”, so you can change the size/height of this div block and it will “adapt” on it (you should check if it will not cut some important information of the image).

1 Like

Oh, thank you! That’s exactly what I meant.
I tried to setup height but, as you said, it stretches the image.

This is what I was trying to achieve:

yep. So you can use a div block instead of image element. And then this wow image as image background.

Just remember that you have to setup the size manually (width and height). So you can change it to portrait format on mobile.