Jump to content

Allow image to stretch to edge of browser window

Recommended Posts

Posted

We are playing with a new site layout, using the Pacific template. We are placing a full-width banner image at the top of the page right under the navigation. our "Site Padding" is currently set 0 (zero), but there's still something containing the banner image to a set size limit. We would like our banner image to size itself to go all the way to the left & right browser borders, but not affect our text margins. Any help would be appreciated.

https://lute-harmonica-3bk2.squarespace.com/
justanothertest

St. Luke's is a small but growing Catholic church and K-8 school in northwestern Ankeny, Iowa (a northern suburb of Des Moines).

Posted

@St Lukes 

The issue is the <main> HTML element has a max-width: 1080px style applied to it. The following CSS below will break the banner outside of it's parent container, but still maintain it's place in the flow of the page:
 

CSS

/* Make the banner image the full width of the page */
#block-yui_3_17_2_1_1705198057319_10582 {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Adjust the slide images to be the full width of the page */
#block-yui_3_17_2_1_1705198057319_10582 .sqs-gallery-design-stacked-slide img {
    object-fit: cover;
    width: 100% !important;
}

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Posted

Sorry @jpeter, you are correct that we are using a gallery for a makeshift rotating banner image. So, when I tried your code, it didn't work as expected. However, when I switched from using a gallery to using an animated GIF, everything worked like we wanted without any modifications. Unfortunately, an animated GIF is a much larger file and it is more difficult to make changes to.

Thanks for your help, but I think we've got it working for us.

St. Luke's is a small but growing Catholic church and K-8 school in northwestern Ankeny, Iowa (a northern suburb of Des Moines).

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.