How to make a responsive fullwidth image

Alfamesteren

I am trying to set in a fullwidth image on a page. Im using a section, and the image looks ok on laptop, but on mobile it only shows a bit of the image because the image dont scale down in size on mobile device.

What can i do to make the image show right on mobile ? 

Bryan

Hi,

please send a link to this page and point to which image you have in mind.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Alfamesteren

Hi

It could be any page, im trying to find a way to insert a fullwidth image, that shows all of the image on mobile devices.

I have been testing on this page: http://algespecialisten.dk/algebehandling-roskilde/

Thanks

Bryan

Hi,

this a section background, edit the section and set the background size to contain, you have it set to cover now.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Alfamesteren

Thanks for your answer.

I have set it to contain now. But when i do that, theres a very long gap between the image and the page content under the image. Is there some way to fix that ?

Bryan

This space is caused by the padding, the image size changes but the padding stays the same. If you do not have any text on the image I would suggest not making this image a background but a just place it as an image. This way it will not need any padding.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Alfamesteren

But if i place it as an image, it can not be fullwidth. So is it not possible to make a fullwith image then ?

Alfamesteren

I think i have found the solution. Set the section to fullwidth and then set an image in the section.

Bryan

Yes, place the image first then add a custom class to it, the class is: scale-with-grid

If the image would not as big as the screen the class will help. 

Your solution is fine

Learn more: Video Tutorials | How To | FAQ Vote on what comes next