Jump to content

Code blocks stack into columns on mobile

Recommended Posts


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



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 -->


  .mywrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;

  @media (max-width: 768px) {
    .mywrapper {
      grid-template-columns: 1fr 1fr;

Alternatively, you could use flex-box?

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

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.