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

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


61885
Go to solution Solved by rwp,

Question

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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

1 answer to this question

Recommended Posts

Create an account or sign in to comment

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


×
×
  • Create New...