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

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 🙂 

Can you share link to page where you want to do this? We can check easier

@tuanphan whoops, I included it in my post, I thought it'd show! it's montsefernandez.com

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!

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

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!

I am also having an issue with portrait mode iPad view if you have time to share your thoughts, @tuanphan. On my About and Homepage I have pinned images. When scrolling on ipad it oddly displays the color block under it. I'd like for portrait mode in ipad to just display those pages as it would for mobile (unless there is some other pinned image fix? I haven't been able to find one). 

Ideally in landscape view, it would stay as is because that is working well on ipad. 

https://seadragon-marlin-z77k.squarespace.com/

Code:1234

In the attached screenshot (iPad) you can see the orange spacing under where I am scrolling. I am not getting this on desktop and on mobile, it switches to a different view where I stack the text under and over the photo block.

On 11/18/2024 at 2:10 AM, KMills said:

I am also having an issue with portrait mode iPad view if you have time to share your thoughts, @tuanphan. On my About and Homepage I have pinned images. When scrolling on ipad it oddly displays the color block under it. I'd like for portrait mode in ipad to just display those pages as it would for mobile (unless there is some other pinned image fix? I haven't been able to find one). 

Ideally in landscape view, it would stay as is because that is working well on ipad. 

https://seadragon-marlin-z77k.squarespace.com/

Code:1234

 

In the attached screenshot (iPad) you can see the orange spacing under where I am scrolling. I am not getting this on desktop and on mobile, it switches to a different view where I stack the text under and over the photo block.

I added a comment here