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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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