Make an image edge to edge (full width) - not a background image

Site URL: https://papaya-armadillo-7acs.squarespace.com/

Password for website: design101

Hi! How do I make an image true edge to edge that remains no matter what screen size?

I have a few occurrences across the website where I am using this wave like device to divide sections. I am using code something similar to this for each wave by sourcing the block id first then this following (adjusting the margin-left as needed):

{
   padding: 0;
    width: 100vw;
    margin-left: -15vw;
}

But I find that when the screen size changes something it's not completely edge to edge and affects the overall margin of the site.

Please help!

Images attached so you know what to look for:

On 6/17/2022 at 8:46 AM, elizablake said:

Site URL: https://papaya-armadillo-7acs.squarespace.com/

Password for website: design101

Hi! How do I make an image true edge to edge that remains no matter what screen size?

I have a few occurrences across the website where I am using this wave like device to divide sections. I am using code something similar to this for each wave by sourcing the block id first then this following (adjusting the margin-left as needed):

{
   padding: 0;
    width: 100vw;
    margin-left: -15vw;
}

But I find that when the screen size changes something it's not completely edge to edge and affects the overall margin of the site.

Please help!

 

Images attached so you know what to look for:

Try adding to Home > Design > Custom Css

#collection-62a2f40a39050c7f3eca9c69 article.sections {
  overflow: hidden;
}

#block-yui_3_17_2_1_1654847468996_10191 {
  margin-left: -30vw;;
}
#block-yui_3_17_2_1_1655273166588_13806 {
  margin-left: -21vw;
}
#block-yui_3_17_2_1_1654849902829_7932 {
  margin-left: -11vw;
}

@media only screen and (max-width: 767px) {
  /*style for mobile display*/
  #block-yui_3_17_2_1_1654847468996_10191 {
    margin-left: -1vw;;
  }
  #block-yui_3_17_2_1_1655273166588_13806 {
    margin-left: -1vw;
  }
  #block-yui_3_17_2_1_1654849902829_7932 {
    margin-left: -1vw;
  }
}

Let me know how it works on your site

My testing

Thank you! On mobile it is now off though.

I also have these waves on almost every page across the site, would I just replace the collection and block ids to make these same settings across each page?

@bangank36 Could you please let me know about the above 🙂