Hide spacer blocks for specific screen size

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)

Still looking for a way to set spacer block width...

Anyoneeee

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

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? 

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.

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)

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.

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

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

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?

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