Jump to content

Two column code block stack on mobile

Recommended Posts

Site URL: https://flamingo-fish-258z.squarespace.com/

I currently have a grid of 9 code blocks. They are in a grid of 3x3, and look great on desktop, but when I view them on mobile, they just go into one big line.

I found some code from a previous question that allowed for a 3 column grid on mobile, but that's too small for my needs, so I'm looking for a way to do  two columns

This is the script I had for 3 columns on mobile:

/* 3 columns mobile */
@media screen and (max-width:640px) {
div#page-section-5fb3c8668ae3d9089a285b49>.row:first-child .span-4 {
    width: 33.33% !important;
    float: left !important;
}
}

If I change the width to 50%, it's almost perfect in 2 columns, but then there are 3 blocks at the end that are stacked on one side. Like this:

1 2

3 4

5 6

7

8

9

 

and I need it to look like:

1 2

3 4

5 6

7 8

9

 

website: https://flamingo-fish-258z.squarespace.com/

pass: iconic

Is there any way to get this working with 2 columns? Thank you in advance!

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

Archived

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.