Jump to content

I need help "forcing" the mobile layout to display on vertical tablet

Recommended Posts

Hi all!

Does anyone know how to force the mobile layout to display on tablet screens automatically? I've seen some folks do this successfully through custom CSS, but I haven't been able to find code that works for my site. Any help would be greatly appreciated!

Thank you 🙂 

Link to comment
  • Replies 5
  • Views 964
  • Created
  • Last Reply

Top Posters In This Topic

Sorry for the double question! @tuanphan

I'm working on a 13in macbook and just saw this issue on a bigger screen—Is there a way to maintain the 2-column layout on my 'Work' image grid on all desktop screens? (montsefernandez.com/work) I already set up the row height as tall as Squarespace will let me (500). On Inspect mode, it switches to a 3-column layout once the screen width reaches 1478px.

So to summarize both questions:
1- All pages: I need the mobile layout to also load on vertical tablet screens
2- 'Work' page only (above): I need to maintain the 2-column layout across all screens wider than 1478px.

Hope this makes sense, and thanks so much for your help!

Link to comment

To make Work Page 2 columns, use this CSS code

@media (max-width: 991px) {
body#collection-6567b685200f7544f5b5a9c4 {
    .gallery-strips .gallery-strips-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 5px;
    }
    .gallery-strips-item-wrapper {
        height: auto!important;
    }
    .gallery-strips-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
    }

    .gallery-strips .gallery-strips-item img {
        height: 100%!important;
      	width: 100%!important;
    }}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

thanks @tuanphan! I tried your code above, but I'm not sure it worked... The layout still shifted to 3 columns on wider screens.

I played around a bit with the code and changed the first line to the below (everything else stayed the same):

@media (min-width: 1478px)

This kinda worked... The layout stays as 2-columns across larger screens, but now alters the order of the tiles.

On the original layout, the tiles are in left-to-right order:
1, 2,
3, 4,
5, 6.
But with your code (with the above min-width modification) the order is now top-to-bottom:
1, 4,
2, 5,
3, 6. 

I removed the custom CSS since it looks like a glitch when resizing the browser window... But please let me know if you need the code to be live to troubleshoot!

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.