Jump to content

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

Recommended Posts

Posted

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 🙂 

  • Replies 7
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

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!

Posted

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

Posted

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!

  • 8 months later...
Posted

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.

Screenshot2024-11-16at7_27_21PM.thumb.png.1ace5ab152daa4ce25a13d8d67fa53de.png

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

Screenshot2024-11-16at7_27_21PM.thumb.png.1ace5ab152daa4ce25a13d8d67fa53de.png

I added a comment here

 

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

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.