How to place a fullwidth single image


#1

Im sure this is super simple I just cant figure it out. All Id like to do is place a fullwidth container on a subpage thats 600px height, and have an image inside this container set to “cover” or scale.

Thanks!


#2

You can do this with both Row and Page Section shortcode.

With Page section you can set this image as a background and add Padding shortcode with value of 600px.
With Row shortcode you add an Image shortcode inside the row and set “Full Width Row” and “Full Width Content” to YES.

If you need further explonation on how its done, then shoot.


#3

You can also do it in the columns design options, to have better control of the width.


#4

thanks for the quick replies! Im going to test it out

-R


#5

Hi,

I’m having the same problem. I can’t get a single image to use full width. I have a page section that is full-width (works). I can add a row and set it to full width, but that doesn’t help either. For the image I can only select sizes like medium or large or original. It will always be limited in width to the image’s width (in this case 1200px). Looking at the code I can see two classes above the image container adding that max-width, they are mk-image-containre and mk-image-holder. Can anyone give me a hint on how to fix this?

I want to use a single image element in order to use its features. I can get a section’S background to go full-width but that’s not what I want.

Thanks!


#6

I solved the problem by placing the large size image, such as 2000x600px in the single image size option. So I’m using the row configuration and content in full width!