Jump to content

How would I use a media query to change the number of columns a block spans at a smaller screen size?

Recommended Posts

Site URL: https://www.jeremyleegibbs.com/

When I inspect my homepage it appears to be set up with 12 columns. 

[2 column Spacer] [4 column image block] [4 column text block] [2 column spacer]

This is great for larger screen sizes but on a tablet it makes the text awkward and hard to read.

If I use "@media screen and (min-width:640px)" and "@media screen and (max-width:1024px) " is there a way to have the Spacers then span 0 columns and both the Image and Text blocks span 6?

I have tried hiding the spacers with:

@media only screen and (max-width:1024px) {
.sqs-block.spacer-block { 
   display:none !important; }}

but unfortunately this only removes them from display and does not change the layout because of the 12 columns the number spanned by the image and text is not effected.

Any ideas would be greatly appreciated! 

Thank you for your time!

Link to comment
  • Replies 1
  • Views 813
  • Created
  • Last Reply


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.