How can I make a full width image?

Support
#1

Hi there,

Do you know how I can make an image constantly take up the full width of the content area (i.e. edge of screen to sidebar) as the screen resizes?

Thank you,
EW

#2

Hello There,

Thanks for writing in! Are you referring to an image inside Cornerstone? Please keep in mind that by default row has a maximum width. To make it fullwidth the same width as the section container, please click the row and in the row settings, disable the column container or inner container:

And by the way, you will need to use Blank - No Container page templates too. To know more about the different page templates in the theme, please check this out:

Hope this helps.

#3

Hi There,

Thank you for writing in! Please add the Custom CSS below to Theme Options > CSS

/*Temp Fix - If image natural width is less than the column width.*/
.x-image img {
	width: 100%;
}

Also, use any of the Blank - No Container page template for your page.


And make sure that your Row’s Inner Container option is turned Off


Hope it helps,
Cheers!

#4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.

#5

Hey @riugn557,

I just wanted to write in here really quick to let you know I’ve just put up a very detailed response to another user’s similar situation over here:

You may find that useful in better understanding how the Image Element works within the builders, as well as some other options to use instead that might work better for “fullwidth” images of a certain sort (i.e. with text on top, et cetera).

Cheers!