elizablake Posted June 17, 2022 Share Posted June 17, 2022 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: Link to comment
Beyondspace Posted June 20, 2022 Share Posted June 20, 2022 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Beyondspace Posted June 20, 2022 Share Posted June 20, 2022 My testing Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
elizablake Posted June 20, 2022 Author Share Posted June 20, 2022 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? Link to comment
elizablake Posted July 4, 2022 Author Share Posted July 4, 2022 @bangank36 Could you please let me know about the above 🙂 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment