HELP: TWO IMAGE BLOCKS PER ROW ON MOBILE VIEW

Site URL: http://www.onyxmodelmanagement.com

Hi, I need some help with my site. I've tried a few codes but nothing has worked so far.

On my index page, I have a lot of image blocks that are in four columns on my desktop site view. They are individual image blocks, not a gallery. On mobile, it stacks all of the images on top of each other and it is too much scrolling. I would like to have two images per row on mobile view.

Here is the link to the page I'm trying to fix: http://www.onyxmodelmanagement.com/rocket-city-1

This is what it looks like on desktop: 

Here is what it looks like on mobile:

Here is what I would like it to look like on mobile:

Can anyone help? Thank you!!

Add to Design > Custom CSS

/* Rocket City 2 columns mobile */
@media screen and (max-width:767px) {
div#page-6248a0ec82fe001ef3ba777c .span-3 {
    width: 50% !important;
    float: left !important;
}
}

This worked perfectly! Thank you sooo much

3 hours ago, JANNAPARK said:

 

@tuanphan

Thank you so much for your help with the coding! It worked perfectly! I appreciate it so much. I was curious if you could help me on another page as well.

I have another index page, "Iron City" that is basically the exact same set up as the "rocket city" page you helped me with. I tried to use the code with the appropriate section ID for the iron city page, but the code is not working for it. Can you help me with it? I just want the two images per row on Mobile devices.

Link: http://www.onyxmodelmanagement.com/iron-city

It looks like you fixed it?

@tuanphan I was able to fix the code, however, the pages look great at the top, but once you scroll half way down, the images start separating and only showing on one side. Do you know how to fix this?

8 minutes ago, JANNAPARK said:

@tuanphan I was able to fix the code, however, the pages look great at the top, but once you scroll half way down, the images start separating and only showing on one side. Do you know how to fix this?

Try this new code

@media screen and (max-width: 767px) {
    div#page-6248d86e464a9b51666cef43 .span-3 {
        width:50% !important;
        float: left !important;
    }
div#page-6248d86e464a9b51666cef43 .span-6+.span-3 {
    clear: left !important;
}
}

@tuanphan

It doesn't seem to be working on Rocket City page. I have another question - because of the way I have the images set up on the page, it might be easier if I had the four columns on mobile just like I have it on desktop that way everything stays in alphabetical order from left to right. Can you give me a code to make it 4 columns instead of two? I think this will fix all of the problems. Thank you! You are such a big help.

8 hours ago, JANNAPARK said:

@tuanphan

It doesn't seem to be working on Rocket City page. I have another question - because of the way I have the images set up on the page, it might be easier if I had the four columns on mobile just like I have it on desktop that way everything stays in alphabetical order from left to right. Can you give me a code to make it 4 columns instead of two? I think this will fix all of the problems. Thank you! You are such a big help.

First, remove this code

@media screen and (max-width: 767px) {
    div#page-6248d86e464a9b51666cef43 .span-3 {
        width:50% !important;
        float: left !important
    }
}

Next, add this code

@media screen and (max-width: 767px) {
    div#page-6248d86e464a9b51666cef43>.row:nth-child(2)>.span-3 {
        width: 25% !important;
        float: left !important;
    }
    div#page-6248d86e464a9b51666cef43>.row:nth-child(2)>.span-6, div#page-6248d86e464a9b51666cef43>.row:nth-child(2)>.span-6 .span-3 {
        width: 50% !important;
        float: left !important;
    }
}

Hi @tuanphan I'm trying to do the same thing on my page www.fayebell.com/landing1 but have the circle images be 3 wide on mobile. Do you have any suggestions? Thanks!

5 hours ago, bellbellbell said:

Hi @tuanphan I'm trying to do the same thing on my page www.fayebell.com/landing1 but have the circle images be 3 wide on mobile. Do you have any suggestions? Thanks!

The url doesn't exist

@tuanphan apologies I changed it: www.fayebell.com/wallpaper

1 hour ago, bellbellbell said:

@tuanphan apologies I changed it: www.fayebell.com/wallpaper

You mean this section and under?

THE PRISMA COLLECTION

10 hours ago, tuanphan said:

You mean this section and under?

THE PRISMA COLLECTION

Yes all the circular image blocks below that

On 6/25/2022 at 10:18 PM, tuanphan said:

You mean this section and under?

THE PRISMA COLLECTION

@tuanphan Yes all the circular image blocks below that

@tuanphan Do you have any advice? Any help is appreciated!

On 6/28/2022 at 7:16 AM, bellbellbell said:

@tuanphan Yes all the circular image blocks below that

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-62b487497e957602cd166a27~.row .span-2 {
    width: 33.3333% !important;
    float: left !important;
}
}

1 hour ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-62b487497e957602cd166a27~.row .span-2 {
    width: 33.3333% !important;
    float: left !important;
}
}

 

@tuanphan Thank you!