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
  • Replies 16
  • Views 3.2k
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
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;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
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

 

 

Link to comment

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
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.

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
1 minute ago, alexion14 said:

Yep 😄

You ROCK!!!

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

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

Archived

This topic is now archived and is closed to further replies.

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