Issue with multi-column images on mobile view

Site URL: https://daisy-chameleon-5pc5.squarespace.com/modules

I'm essentially building out a "products" page, but I can't use the actual product's pages since I'm not selling these items directly on my site. With that being said, I've tried all kinds of different ways to display and layout the products, and just using image blocks has been the best I've been able to come up with so far. The issue I've run into is that on mobile, the stacked images make the page way to long and not very usable. I was able to make it a little better with @tuanphan's code from the post below, but I've run into another problem. 

Specifically, I'm now running into an issue where any rows with a single item are displaying their images as right oriented. I've tried adjusting the float property, and while changing it to "float: left" does fix that problem, all of my odd numbered rows now show their last image floating right with a blank space to the left. Any thoughts on the best way to handle this?

Here's what I currently have running:

@media screen and (max-width:767px) {
div#page-section-5e97b45ae7ee50004720233c>.row>.col>.row>.col {
    width: 50% !important;
    float: right !important;
}
}

Here it the page I'm working on. (pw: mothership)

float: right issue

float: left issue

You can use products, then use code to remove price, quantity, add to cart..

2 hours ago, tuanphan said:

You can use products, then use code to remove price, quantity, add to cart..

 

Well, I tried that, but then realized that I can't actually edit the product pages to the extent that I need to be able to. I basically need to have a full page for each product with new sections that I can put in and everything. On top of that, there are a couple other places where I'm still having this stacking problem on mobile that I need to figure out.

10 hours ago, elilongwell said:

Well, I tried that, but then realized that I can't actually edit the product pages to the extent that I need to be able to. I basically need to have a full page for each product with new sections that I can put in and everything. On top of that, there are a couple other places where I'm still having this stacking problem on mobile that I need to figure out.

@media screen and (max-width:767px) {
div#page-section-5e97b45ae7ee50004720233c>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5e97b45ae7ee50004720233c>.row>.col>.row>.col:nth-child(2n+3) {
    clear: left !important;
}
}

On 4/18/2020 at 8:50 AM, tuanphan said:

@media screen and (max-width:767px) {
div#page-section-5e97b45ae7ee50004720233c>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5e97b45ae7ee50004720233c>.row>.col>.row>.col:nth-child(2n+3) {
    clear: left !important;
}
}

 

Thanks! That worked great!

Hi @tuanphan, I'm trying to do something similar on a page with three columns consisting of individual image blocks (I need to have hover captions so can't use gallery/grid block) - but the third column (far right) ends up stacking underneath the first two columns. Is there any way to fix this so the images stack from left to right (eg. horizontally across a row, instead of vertically by column)?

You can try resizing the browser to see what I mean: https://hyperboloid-finch-3kll.squarespace.com/work (password is "preview"). Thank you in advance!

On 12/8/2020 at 8:22 AM, salondaome said:

Hi @tuanphan, I'm trying to do something similar on a page with three columns consisting of individual image blocks (I need to have hover captions so can't use gallery/grid block) - but the third column (far right) ends up stacking underneath the first two columns. Is there any way to fix this so the images stack from left to right (eg. horizontally across a row, instead of vertically by column)?

You can try resizing the browser to see what I mean: https://hyperboloid-finch-3kll.squarespace.com/work (password is "preview"). Thank you in advance!

You need to adjust layout a bit.

Step 1. Add image 1, image 2

Step 2. Add Line Block

Step 3. Add image 3, 4

Step 4. Add Line Block.

...

Final, remove all Line Blocks, then check again on mobile

21 hours ago, tuanphan said:

You need to adjust layout a bit.

Step 1. Add image 1, image 2

Step 2. Add Line Block

Step 3. Add image 3, 4

Step 4. Add Line Block.

...

Final, remove all Line Blocks, then check again on mobile

Thanks for the suggestion! I tried it out. The layout works better but still leaves an empty spot after every third photo:

On 12/10/2020 at 7:57 AM, salondaome said:

Thanks for the suggestion! I tried it out. The layout works better but still leaves an empty spot after every third photo:

Because you have custom code acting on those elements. Please delete them.

On 12/11/2020 at 4:10 PM, tuanphan said:

Because you have custom code acting on those elements. Please delete them.

 

I've tried removing all the custom code acting on those elements. The problem still remains unfortunately.

@media only screen and (min-width: 768px) and (max-width:1366px) {
    div#page-section-5f9628af3cec5c16930679f5>.row>.col>.row>.col {
        width:50% !important;
        float: left !important
    }

    div#page-section-5f9628af3cec5c16930679f5>.row>.col>.row>.col:nth-child(2n+3) {
        clear: left !important
    }
}