Image Full Width in Section

Support
#1

dear support,

i found this in another thread (https://theme.co/apex/forum/t/full-width-images/16075/2):

Thanks for posting in! Are you trying to have a fullwidth image right in your section? Please insert a section and in the row settings, please disable the column container to make the row as wide as the section. In your column, please insert an image element. In most cases, the image will display as wide as the original width of the image. It will not be stretch out and be fullwidth unless you add an inline css min-width: 100%; width: 100%; in your image settings. And if you are using the v2 image element, you can simply set the width to 100% instead.

that does not want to work in my case. the image is 3000px wide and just covers the site width of 1100px.

how can i set up only one section as full width with one image in it? and is it possible to have the image cover the whole width even if it is only say 500px horizontally?

thanks a lot! kai

#2

Hi,

If you are using a classic Image Element you can add the following CSS to the Style Box which you find at the bottom of the element:

width: 100%;

It is not recommendable to strecht an image beyond it´s original width as it will result on quality loss.

Hope it helps

#3

thanks joao, i just can’t get this to work. did you have a look at the secure note? i described the page i am working on and you can see that the section is not full width. maybe that is the reason its not working? i searched the forum up and down and tried out the info i could find but the sections stays within the boundaries of the container (1100px). can’t be so hard to have a full-width section. no? :wink: thanks, kai

#4

Hi Kai,

Go to Cornerstone > Settings > Page Template > Choose:

Blank No Container Header Footer

Hope it helps!

#5

hi joao, that was it. thanks a lot! now it looks the way i wanted it. even the image is aligned to the footer. great! :wink: have a great day! kai

#6

Thanks for letting us know.

Blank No Container Header Footer is the template to go when you want this style of pages.

All the other instructions on this thread are also valid.

Cheers!

#7

thanks again! i will keep that in mind and play now with the options :wink:

#8

by the way. i want to mention and thank you for the much much faster support lately. weeks ago i was complaining a lot about the slow replies since the new forum. now i like the forum again! :ok_hand:

#9

We got back on track, some days it might take a bit longer than what you are experiencing today, but the last couple of months we were taking longer than our standart time. We have pushed the product to new boundaries which will allow the users amazing new things but during the transition process unfortunely sometimes the path is not as smooth as expected. I have followed your threads and I am glad to see you happy. Thanks for the kind words!

#10

yeah. i understand now :wink:

one more question:

right now i only get a full width picture with a 3000px wide picture. but it also stops at 3000px (i have 2 displays :wink:

what must i do to have a 1000px image always fullscreen? i mean like the “cover” option for background images.

min-width: 100%; width: 100%;

did not help.

thanks a lot! kai

#11

Hi Kai,

Sorry, you’re having that issue, that is actually a bug. To address it, 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%;
}

Hope it helps,
Cheers!

#12

hi friech, thanks for the fix! it works perfectly! greetings from the bug scout. kai

#13

Glad to hear we managed to help!

#14

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

#15

Hey @iTurtle,

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!

1 Like