Jump to content

Code blocks stack into columns on mobile

Recommended Posts

Hi

My site has an index page that features a page with two rows of four code blocks. Each code block shows an image that changes when the mouse is hovered over them. The reason for my enquiry is I am trying to figure out how to stop the code blocks from stacking as one long list in mobile. Is it possible to have them stacked as two columns of four images?

 

Many thanks

landscape.jpg

mobile.jpg

Link to comment

Put all of the code into one code block and use a wrapper set to "grid".

Something like this:

<div class=mywraper>

  <!--- Your codes go here -->

</div>

<style>
  .mywrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
  }

  @media (max-width: 768px) {
    .mywrapper {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>

Alternatively, you could use flex-box?

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.