[Resolved] make an image span whole page

[Michael]

In Layout settings I have defined a container width of say 900px. Now if I have a image in a section of a page, how could I make the image’s width not be restricted by the defined container width (900px in this case) but to span over the whole screen/browser width from the left to the right?
Problem is, I want the image to fill the whole browser window from left to right, regardless of monitor size, but want the rest of the content of the page (text etc.) be within a container of 900px width.
Thanks for any help!

[Tom]

How are you adding this image? Are you using the Sections add-on? Page Header add-on? Or are you just adding it into your content?

If it’s with the rest of the content, it’s not really possible to tell it to break out of the surrounding container.

Let me know 🙂

[Michael]

Thanks for your help. I am using sections plug in and it is first (top) section on a page. In that section the picture is the only content. Below that I have sections with normal text.

I have several pages on the site and on each of those pages I want a different image to show, but each of them with that same format (maximum width to fill the browser window).

[Tom]

This is definitely do-able using Sections 🙂

First, set the box type and inner box type to “Fluid”.

Now for your image, add this style to it: style=”width:100%;”

So your image would look something like this: <img src="..." style="width:100%;" />

Let me know if that does the trick or not.

[Michael]

Thanks for your help. Unfortunately, it doesn’t work yet.
I have box type and inner box type set to fluid. Only this code within in the section:

(wordpress changes it a bit though..)

[Michael]

sorry wrong format, should have chosen “code” here.

<img src="http://drascher.de/wp-content/uploads/2015/04/stuttgartmitlogo.png" style="width: 100%;" />

hope this does it now

[Tom]

Any way you can link me to the site so I can see why it’s not working? Either through here or email (support@generatepress.com)?

[Michael]

yes, thanks. sent you an email!

[Tom]

Ah, are you disabling the mobile functionality?

Try adding this CSS:

.generate-sections-enabled .container.grid-container {
    max-width: 100%;
    width: 100%;
}

[Brittany Pescetto]

I am trying to set one slide on the parallax banner (in evolve theme) to be a responsive image the full width of the slider/page, rather than flush right and constrained to a box.

Thanks!

[Tom]

I’m afraid we can’t offer support for other themes here – check with their support forum 🙂

[Author]

Posts