Chubacca21 Posted November 3, 2020 Share Posted November 3, 2020 Site URL: https://harp-circle-pgnx.squarespace.com/ (Password is sheep) I'm trying to make a few blocks truly full width (i.e. the full width of the user's screen). Specifically, an image block, a text block and another image block. The images are of a "torn paper" texture which has a transparent edge. I've tried different combos of negative margins, but that doesn't work on all screens. How can I accomplish this? andrewbn 1 Link to comment
Beyondspace Posted November 4, 2020 Share Posted November 4, 2020 5 hours ago, alexion14 said: Site URL: https://harp-circle-pgnx.squarespace.com/ (Password is sheep) I'm trying to make a few blocks truly full width (i.e. the full width of the user's screen). Specifically, an image block, a text block and another image block. The images are of a "torn paper" texture which has a transparent edge. I've tried different combos of negative margins, but that doesn't work on all screens. How can I accomplish this? Feel free to try this solution via Design->Custom Css #block-yui_3_17_2_1_1604429981024_6275, #block-yui_3_17_2_1_1604224630852_5351, #block-yui_3_17_2_1_1604431732518_6331 { padding: 0; width: 100vw; margin-left: -4vw; } tuanphan and amanda4 2 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
Chubacca21 Posted November 4, 2020 Author Share Posted November 4, 2020 8 hours ago, bangank36 said: Feel free to try this solution via Design->Custom Css #block-yui_3_17_2_1_1604429981024_6275, #block-yui_3_17_2_1_1604224630852_5351, #block-yui_3_17_2_1_1604431732518_6331 { padding: 0; width: 100vw; margin-left: -4vw; } Thanks for your suggestion. I've tried adding your code, but at some screen sizes I'm getting extra space to the right of my content. And at other sizes (like in your screen shot above), the text is being cut off on the left. Link to comment
Beyondspace Posted November 4, 2020 Share Posted November 4, 2020 Thanks for trying, I reduced the width a bit #collection-5f9be812f06f7953d689e18e { overflow-x: hidden; } #block-yui_3_17_2_1_1604429981024_6275, #block-yui_3_17_2_1_1604224630852_5351, #block-yui_3_17_2_1_1604431732518_6331 { padding: 0; width: 100vw; margin-left: -3vw; } #block-yui_3_17_2_1_1604224630852_5351 { padding: 2vw; width: 95vw; } 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
Chubacca21 Posted November 4, 2020 Author Share Posted November 4, 2020 (edited) 38 minutes ago, bangank36 said: Thanks for trying, I reduced the width a bit #collection-5f9be812f06f7953d689e18e { overflow-x: hidden; } #block-yui_3_17_2_1_1604429981024_6275, #block-yui_3_17_2_1_1604224630852_5351, #block-yui_3_17_2_1_1604431732518_6331 { padding: 0; width: 100vw; margin-left: -3vw; } #block-yui_3_17_2_1_1604224630852_5351 { padding: 2vw; width: 95vw; } Ok, have tried your new code. The text is not full screen, and at certain screen sizes, again, the text gets cut off at the left. I've tried changing the width from 95vw to 100vw which reduces that space on the right, although there is still a gap (at some screen sizes), so it's not completely full screen all the time. And I still have the issue of the text being quite close to the edge. Edited November 4, 2020 by alexion14 Link to comment
Beyondspace Posted November 4, 2020 Share Posted November 4, 2020 are you viewing it in editor, could you check it on live 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
Chubacca21 Posted November 4, 2020 Author Share Posted November 4, 2020 (edited) 32 minutes ago, bangank36 said: are you viewing it in editor, could you check it on live site? Ah, I was viewing it in the editor. Have viewed it in the live site, and it's pretty much the same. Except, now I'm actually getting a bit of right/left scroll with blank space to the right of my content again. Edited November 4, 2020 by alexion14 typw Link to comment
Beyondspace Posted November 4, 2020 Share Posted November 4, 2020 1 minute ago, alexion14 said: Ah, I was viewing it in the editor. Have viewed it in the live site, and it's pretty much the same. Except, not I'm actually getting a bit of right/left scroll with blank space to the right of my content again. okay I am helping you check 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 November 4, 2020 Share Posted November 4, 2020 6 minutes ago, alexion14 said: Ah, I was viewing it in the editor. Have viewed it in the live site, and it's pretty much the same. Except, not I'm actually getting a bit of right/left scroll with blank space to the right of my content again. Let's add !important on this line, it's seems to be overrided 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
Chubacca21 Posted November 4, 2020 Author Share Posted November 4, 2020 I've put the !important and switched back to 95vw in and here is what I'm seeing in Safari, when I scroll to the right: I'm logged into Squarespace in Chrome. And when I'm in the edit screen, then click the full screen arrow on the top right this is what I see (there is no horizontal scroll issue): Link to comment
Beyondspace Posted November 4, 2020 Share Posted November 4, 2020 What I got http://beyondspace.tk/wp-content/uploads/2020/11/bg.gif 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
Chubacca21 Posted November 4, 2020 Author Share Posted November 4, 2020 Strange! And you don't get a horizontal scroll? I've tried removing all the other css I had to see if anything was interacting in an unexpected way, but I'm still getting the same behaviour! So frustrating... but thank you for your help Link to comment
Chubacca21 Posted November 4, 2020 Author Share Posted November 4, 2020 I've ended up creating a new section for each element (image, text, image) and adjusting the top and bottom margins! https://harp-circle-pgnx.squarespace.com/home-1 Link to comment
Beyondspace Posted November 4, 2020 Share Posted November 4, 2020 9 minutes ago, alexion14 said: I've ended up creating a new section for each element (image, text, image) and adjusting the top and bottom margins! https://harp-circle-pgnx.squarespace.com/home-1 So you solved it on your own? 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
Chubacca21 Posted November 4, 2020 Author Share Posted November 4, 2020 1 minute ago, bangank36 said: So you solved it on your own? Yep 😄 Beyondspace 1 Link to comment
Beyondspace Posted November 4, 2020 Share Posted November 4, 2020 1 minute ago, alexion14 said: Yep 😄 You ROCK!!! Chubacca21 1 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
SarahHalbeisen Posted November 9, 2020 Share Posted November 9, 2020 Hello! I'm experiencing the same issues: I have several pages on the websites and with the "blank page" template there seems to be an issue with a horizontal scroll. (Index pages are totally fine!) On a desktop when you mainly scroll vertically, the issue is minor. But on a smartphone when your finger isn't as precise, the page seems to wobble. I can't quite figure out how you solved this issue... Could you please explain in more detail? Thank you for your help! BTW: This is the site I have the issue with https://www.bad-balgach.com/das-restaurant 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