Jump to content

Preserving A Two Column Desktop Layout on Mobile

Go to solution Solved by tuanphan,

Recommended Posts

Hi, I'm hoping to mirror the two column desktop layout of my site on the mobile view as well.

This is the layout of my homepage and pages like this and this throughout my site — all of which are either image layouts or gallery grids.

Currently on mobile, the images are stacked rather than displaying in columns and the order of the images does not correlate as shown in the attached images.image.thumb.png.ca2d093cf087a3a437a2cb3e45c5684d.png

IMG_02D50A64E7C7-1.jpeg

Edited by gaganmoorthy
Posted before completing the request!
Link to comment
  • Replies 9
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Thank you so much @tuanphan!

This code works great and I assume I can just use the same code for various page on my site and simply swap in the correct #page for each then?

And, additionally, is there any way to reduce the padding in between images in this view so the images display larger and closer together?

 image.thumb.png.6d0091710ffdec685d9713325f97dda3.png

Link to comment
On 2/25/2024 at 7:32 AM, gaganmoorthy said:

Thank you so much @tuanphan!

This code works great and I assume I can just use the same code for various page on my site and simply swap in the correct #page for each then?

And, additionally, is there any way to reduce the padding in between images in this view so the images display larger and closer together?

 image.thumb.png.6d0091710ffdec685d9713325f97dda3.png

Just add column-gap

@media screen and (max-width: 767px) {
    div#page-5cf6ed87e03c28000107a516 .span-12>.row {
        column-count:2;
        column-gap: 0px;
    }
}

With other pages, you can share link, I will give you code

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 for this @tuanphan! Column-gap works well, though I'm guessing there's no further way to reduce the padding of that gap in the middle is there?

And, as far as the other pages go, it would be great if you can support on individual codes — but there are several so I do not want to take up your time! If it's as simple as inspecting to find the respective #page or #collection numbers on each page I can try that. The additional pages I'm looking to modify are as follows:

Link to comment
On 2/27/2024 at 9:07 AM, gaganmoorthy said:

Thanks for this @tuanphan! Column-gap works well, though I'm guessing there's no further way to reduce the padding of that gap in the middle is there?

And, as far as the other pages go, it would be great if you can support on individual codes — but there are several so I do not want to take up your time! If it's as simple as inspecting to find the respective #page or #collection numbers on each page I can try that. The additional pages I'm looking to modify are as follows:

Use this code. With some pages, you will need to save & reload the page to see result

@media screen and (max-width: 767px) {
    div#page-5cf6ed87e03c28000107a516 .span-12>.row {
        column-count:2;
        column-gap: 0px;
    }
/* rodeo page */
div#page-65d295500d3ab3468b02453f .row {
    column-count: 2;
    column-gap: 0px;
}
/* lost angeles */
div#page-65d3d99e75e5e30315fd17d1 .row {
    column-count: 2;
    column-gap: 0px;
}
/* serengeti */
div#page-65d3deac74a50843610e88ad .row {
    column-count: 2;
    column-gap: 0px;
}
/* oklahoma */
div#page-579580fe8419c25e8f090a1f .row {
    column-count: 2;
    column-gap: 5px;
}
/* Outdoors */
div#page-5cf9e9b04cc12a00013c79ac .row {
    column-count: 2;
    column-gap: 5px;
}
/* France */
div#page-5cf990c6fdb0e70001053542 .row {
    column-count: 2;
    column-gap: 5px;
}
/* Budapest */
div#page-5cf992c09dfe100001c02585 .row {
    column-count: 2;
    column-gap: 5px;
}
/* Croatina */
div#page-5cf9923b590e900001c73f43 .row {
    column-count: 2;
    column-gap: 5px;
}
/* Thailand */
div#page-5cf992c64749800001db7129 .row {
    column-count: 2;
    column-gap: 5px;
}
}

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

Thank you @tuanphan!! This covers the bases and I really appreciate the time and work!

Just one more question if you can return to this: I'm running it to a couple issues on the rodeo page where the text is also broken into two columns and images are showing up in multiple columns later down the page. 

Any ideas on a solution for this? Is it possible to separate the text up top and account for full-bleed images in the middle?

IMG_9253.PNG

IMG_9254.PNG

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.