Full width hero on mobile

[Jennine]

Hello,
How do I make this picture full width on mobile? I want it to take up the entire row but not have it as a background image.! I have it as an image element.

[nabeel]

Hi Jennine,

Thank you for reaching out to us. To have fullwidth image, first you need to turn Off the Global Container in the Row settings of the section that contains the Image element:

Then go to Page Settings and select Blank - No Container | Header, Footer page template:

If the image is still not fullwidth then turn off the Retina setting of the Image element:

Let us know how this goes!

[Jennine]

that worked for the vertical phone but horizontal it still looks like this:

[ruenel]

Hello @Jennine,

I have checked the Careers page and I am not seeing the image. It is best that you add a row, set the width to 100% while setting a maximum width of 1200 pixels.

You can then insert the image in a one column row with the settings above.

We would love to know if this has worked for you. Thank you.

[Jennine]

hello, thanks for your response. I tried that but it is still the same. The url is:
https://www.statenislandda.org/careers2/
Thanks again

[christian]

Hey @Jennine,

I’d just like to clarify about what you need. Ruenel said that you set a Max Width of 1200px. Are you trying to contain the image or do you want a Full Width image from desktop to mobile?

If you want a full width image, please disregard what Ruenel said and go back to Nabeel’s suggestion. The only thing Nabeel missed to mention is that you will need to use an image larger or equal to the screen size.

For example, you need to use an image with 1920px in width to cover a 1920px screen/monitor. Retina mode still needs to be disabled as that option will halve an image so a 1920px image becomes 980px.

If you will support 4k monitors or monitors with more than 4000px. You need to use a 4000px image. Just note that when using large images, it is best that you use an image optimization plugin. Image optimization is beyond the scope of our theme and support so you’ll want to consult with a developer to integrate that in your site.

Hope that helps.