Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Full width blocks


Chubacca21

Question

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

16 answers to this question

Recommended Posts

  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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
  • 0

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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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
  • 0

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

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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
  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0

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
  • 0

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
1 minute ago, alexion14 said:

Yep 😄

You ROCK!!!

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0

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...