[Resolved] make an image span whole page

Home Forums Support make an image span whole page

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #113721
    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!

    #113761
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #113783
    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).

    #113811
    Tom
    Lead Developer
    Lead Developer

    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.

    #113815
    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..)

    #113824
    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

    #113871
    Tom
    Lead Developer
    Lead Developer

    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)?

    #113895
    Michael

    yes, thanks. sent you an email!

    #114009
    Tom
    Lead Developer
    Lead Developer

    Ah, are you disabling the mobile functionality?

    Try adding this CSS:

    .generate-sections-enabled .container.grid-container {
        max-width: 100%;
        width: 100%;
    }
    #218877
    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!

    #218907
    Tom
    Lead Developer
    Lead Developer

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.