Full width blocks

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?

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;
}

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.

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;
}

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.

are you viewing it in editor, could you check it on live site?

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.

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

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

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

What I got

http://beyondspace.tk/wp-content/uploads/2020/11/bg.gif

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

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

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?

1 minute ago, bangank36 said:

So you solved it on your own?

Yep 😄

1 minute ago, alexion14 said:

Yep 😄

You ROCK!!!

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