Jump to content

Full width blocks

Recommended Posts

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?

Link to comment
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;
}

image.thumb.png.73fa76e1c0b5cce7ef68316932364611.png

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, Keyword Highlighter
If 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
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;
}

image.thumb.png.73fa76e1c0b5cce7ef68316932364611.png

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.

1356792716_Screenshot2020-11-04at10_48_19.thumb.png.0519808ff68aa9f004db90b1ed4a41fa.png

1594981525_Screenshot2020-11-04at10_48_43.png.66c6910fcf2a2c4a62a4f765876ce96b.png

 

Link to comment

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, Keyword Highlighter
If 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
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.

117844352_Screenshot2020-11-04at11_52_49.png.48ccd3574596905e9cfbb1bfb59c7816.png

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.

1736583150_Screenshot2020-11-04at11_54_35.png.d98dac8727dce6a8bd60df95ce9be993.png

 

 

Edited by alexion14
Link to comment

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, Keyword Highlighter
If 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
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 by alexion14
typw
Link to comment
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, Keyword Highlighter
If 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
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

image.png.0a255d9c349a5ef2787b5127b48a5d3a.png

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, Keyword Highlighter
If 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

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:

2080592697_Screenshot2020-11-04at12_44_39.png.d79d9497f0c8ceb3b507625814802ecc.png

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):

405775172_Screenshot2020-11-04at12_49_14.png.6f453cc71dbe02feb635a158c4af2d95.png

 

Link to comment

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, Keyword Highlighter
If 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
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, Keyword Highlighter
If 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
1 minute ago, alexion14 said:

Yep 😄

You ROCK!!!

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, Keyword Highlighter
If 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

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

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.