Home>Support>Make image banners full width

Make image banners full width

By Natacha, 10 years ago. Last reply by Magus, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

How can I stretch my custom image banners so there’s no white (gray) space on either side or top? I want the image to touch the menu bar… I have an image like this on all my pages.

Thanks

URL: http://thresholdcommunications.com/wordpress/sample-page/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 29 days ago Natacha

    Sorry here is the correct URL: http://thresholdcommunications.com/wordpress/about/

  2. 10 years, 29 days ago fnanfne

    Hi Natacha,

    Go to:

    Appearance –> Theme Settings –> Layout

    Then under “Layout Bound”, select “Full Width” in the dropdown menu.

  3. 10 years, 29 days ago fnanfne

    Oh no hold on, I think I misunderstood you!

    Doing what I suggested will make the whole theme stretch. Not sure about the image, what resolution did you create the image as, 1080 X 420 ?

  4. 10 years, 29 days ago Natacha

    Yeah I am not trying to make the whole theme stretch but just the images I put in below menu on each page. I am trying to make the image have no white space above it or no space on either side.

    The images are 1080 wide, yes…

  5. 10 years, 28 days ago Magus
    Hi, I Work Here

    Hi Natacha

    Please navigate to Appearance->Custom CSS and add the following to the editor

    #main {
    padding-top: 0px;
}

article.post .entry-header, article.page .entry-header {
    margin-bottom: 0px;
}

.entry-content img:first-of-type {
    margin-left: -35px;
    margin-right: -35px;
    position: absolute;
}

    Let us know how you get on

    Magus

  6. 10 years, 28 days ago Natacha

    Hi thank you for the code. It worked (sort of). Images are now covering content below. Any adjustment I need to make?

    http://thresholdcommunications.com/wordpress/contact-us/

  7. 10 years, 28 days ago Natacha

    Also, inputting this custom CSS made me lose my “Clients” slider at the bottom of homepage:

    http://thresholdcommunications.com/wordpress/

  8. 10 years, 28 days ago Andrew Misplon
    Hi, I Work Here

    Hi Natacha

    A solution without CSS would be to use Meta Slider. Add each banner as a single slide slider. On each page you can add the slider using the Page Slider metabox in the right column. That’ll place the image exactly where you want it.

  9. 10 years, 27 days ago Magus
    Hi, I Work Here

    Hi Natacha

    My apologies, I was targeting the wrong element and did not notice the text had moved beneath the image. Please try this instead

    .home #main (
    padding-top: 35px;
}

#main {
    padding-top: 0px;
}

article.post .entry-header, article.page .entry-header {
    margin-bottom: 0px;
}

.entry-content p:first-of-type {
    margin-left: -35px;
    margin-right: -35px;
    position: absolute;
}

    Magus

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More