Mobile site looks funky

Hello, 

Hoping someone can help me with a line of CSS or two that might fix the glitchy look of the (attached) grid page of my mobile site on this page. I've also included an image of the desktop version which looks exactly how I would like it to. I've tried changing the aspect ratios of the grid items and it's not helping, so I'm guessing it's a glitch that's in need of a CSS solution. 

Thanks so much for your help.

Colin

Can you share site url? We can check easier

Yes, sorry about that. It's - https://www.colinnissan.com/

Thank you

And this is the specific page that's giving me trouble.

https://www.colinnissan.com/work

Don't remove any code in your CSS box, add this code to CSS box

@media screen and (max-width:767px) {
body#collection-65fc9bf1c73e51445842803e {
.gallery-grid-item img {
    min-height: 135px;
    position: static !important;
}

.gallery-grid-item-wrapper {
    padding: unset !important;
    height: auto !important;
}

a.gallery-grid-image-link {
    position: static !important;
}
}}

Thank you so much, Tuan. I added this code to the CSS box. The page looks better but the video images on the left are still smaller than the ones on the right. (pic attached).

Any thoughts?

Thank you again!

Colin

And for reference, here is the my entire current CSS box after adding your code 

Thank you.

On 4/9/2024 at 9:05 PM, cnissan said:

And for reference, here is the my entire current CSS box after adding your code 

Thank you.

 

 

Hi,

Can you send all current code in CSS box? I think some code are conflict

Yes, sure. Here is the CSS Box with all my current code.

Thank you!

Colin

Remove code I sent & use this new code

@media screen and (max-width:767px) {
body#collection-65fc9bf1c73e51445842803e {
.gallery-grid-wrapper {
    grid-gap: 5px !important;
    width: 100% !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
.gallery-grid-item img {
    min-height: 135px;
    position: static !important;
}

.gallery-grid-item-wrapper {
    padding: unset !important;
    height: auto !important;
}

a.gallery-grid-image-link {
    position: static !important;
}
}}

Weird, it's still the same when I replace the old code with the new one you just sent - the videos on the left are smaller than the videos on the right. (see attached) Any other thoughts?

Thanks Tuan!

Colin

On 4/22/2024 at 5:48 PM, cnissan said:

Weird, it's still the same when I replace the old code with the new one you just sent - the videos on the left are smaller than the videos on the right. (see attached) Any other thoughts?

Thanks Tuan!

Colin

 

You can check again. I just checked & I still see you are using old code

Maybe you forgot to click Save.

You need to use new code (in new code, I added some red code)

I see you marked it as solved. Did you solve or still need help?

Hi Tuan, 

I think it's solved. There must have been a bug in some of gallery images but I resized them in the grid and now they appear normal for some reason. But your code helped to get me 90% of the way. Thanks so much for sticking with it! Really appreciate it.

Colin