How can i globally (or even locally) control spacer blocks for tablet only

Site URL: https://www.on2design.co.uk

Hello all,

Is there a way  to remove or control the size of any spacer columns/spacer blocks in a page or site-wide from a specific screen size using CSS—in this case—for tablet screens?

I just want to have a more control over the spacing of elements on the page.

I am using the Avenue template.

Many thanks for any help given 😊

 

9 hours ago, Nathan_G said:

Site URL: https://www.on2design.co.uk

Hello all,

Is there a way  to remove or control the size of any spacer columns/spacer blocks in a page or site-wide from a specific screen size using CSS—in this case—for tablet screens?

I just want to have a more control over the spacing of elements on the page.

I am using the Avenue template.

Many thanks for any help given 😊

 

You can consider some tips

@media only screen and (max-width: 768px) {
  /* For specific spacer */
  #block-b5ced66b9ba1b585b2b5.sqs-block-spacer {
    
  }
  /* For specific page's spacer */
  #collection-5ac030d5575d1f2de6462141 .sqs-block-spacer {
    
  }
  /* For site wide spacer */
  .sqs-block-spacer {
    
  }
}

use this extension to find out

https://chrome.google.com/webstore/detail/igjamfnifnkmecjidfbdipieoaeghcff

Thank you so much for replying Bangank36!!

that extension looks really useful.👌🏽

BTW, did you see my previous post with what i am finding much more challenging?

Thanks again, appreciated 🙏🏾