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

Hide spacer blocks for specific screen size


nmk

Question

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)

Edited by nmk
Link to post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@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-5f0210a1dc3c

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

Posted Images

10 answers to this question

Recommended Posts

  • 0

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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 post
  • 0
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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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 post
  • 0
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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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 post
  • 0
@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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

thanks @tuanphan This code fixes only the first paragraph (shown in your screenshot). The rest of the page remains the same (I've attached a screenshot showing this)

Do you know how I can target all text on the entire site instead of a specific div?

 

image.png

Link to post
  • 0

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...