Jump to content

Hide spacer blocks for specific screen size

Recommended Posts

I'm looking for a way to remove spacer blocks for a certain minimum screen size (for phones, ipads, small 13" laptops). Currently, the spacer width I have for a 27" screen stays the same for an ipad screen and it looks... messy. I'm left with a long vertical sliver of text at the center of the screen with huge margins on the side

I know squarespace automatically removes spacer blocks that are next to other blocks when viewed on mobile. But this doesn't happen for ipads and small laptops. 

Even better would be a way to set the padding width directly (xxpx)

Link to comment
  • Replies 10
  • Views 2.3k
  • Created
  • Last Reply
On 9/26/2020 at 6:33 PM, tuanphan said:

Add to Home > Design > Custom CSS


/* Remove spacer block */
@media screen and (max-width:1000px) {
.space-block {
	display: none !important;
}
}

you can adjust 1000 to another number

Thanks for your response @tuanphan 
This removes the blocks but the text does not expand to fill up the free space, it remains the same width and is left aligned instead of center aligned

Is there a way to expand the text block to take up the freed up space? 

Link to comment
13 minutes ago, nmk said:

Thanks for your response @tuanphan 
This removes the blocks but the text does not expand to fill up the free space, it remains the same width and is left aligned instead of center aligned

Is there a way to expand the text block to take up the freed up space? 

Can you share link to page in your question? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
17 minutes ago, tuanphan said:

Can you share link to page in your question? We can check easier.

Thanks for such a  timely response @tuanphan really appreciate it

 

Here's a page from my site as an example (password: projects886): https://www.narmeen.design/scallion

 

the spacers are removed for an ipad's screen size and lower:

// for ipad
@media only screen and (min-width:701px) and (max-width:1232px)

Link to comment
On 10/3/2020 at 10:07 AM, nmk said:

Thanks for such a  timely response @tuanphan really appreciate it

 

Here's a page from my site as an example (password: projects886): https://www.narmeen.design/scallion

 

the spacers are removed for an ipad's screen size and lower:

// for ipad
@media only screen and (min-width:701px) and (max-width:1232px)

 

On 10/3/2020 at 9:32 AM, nmk said:

Thanks for your response @tuanphan 
This removes the blocks but the text does not expand to fill up the free space, it remains the same width and is left aligned instead of center aligned

Is there a way to expand the text block to take up the freed up space? 

Which text? Can you take a screenshot? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
10 hours ago, tuanphan said:

 

Which text? Can you take a screenshot? We can check easier.

 

 

 

Thanks @tuanphan I use spacers to center text on the entire page, so once spacers are removed all the text shifts to the left instead of just expanding. I've attached a couple of screenshots from the page I linked to

 

 

image.thumb.png.6c399965f403667e99e3a44617a33639.png

image.thumb.png.c75b4cf367dc2c3a4aba3c3b97c0031b.pngimage.thumb.png.1e7561994207de0c69f9d5cfcdd67599.png

Link to comment
@media only screen and (min-width:701px) and (max-width:1232px) {
.spacer-block {
	display: none;
}
div#page-section-5f0210a1dc3ce86c6be2585c .span-9 {
    width: 100%;
}
div#page-section-5f0210a1dc3ce86c6be2585c .span-9 .span-3 {
    width: 45%;
}
}

image.thumb.png.2ad8eaffba4ddb67237a54e4f4150471.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

In case somebody finds it useful: I resolved this issue by using the site-wide spacing setting instead of using spacers to control content width. The page width is fixed and does not change depending on the screensize, so that solved my issue of having too narrow of a content width on smaller screens

image.png.b9f3fb293f8fb0fbc08b3fce069e92a1.png

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.