How can I fix image stacking issues on mobile view for my custom content section?

[j_j_j]

Hi -

Debut Theme, Home Page  

SITE:  store.growcentral.net

I have a custom content section with 2 image blocks.  The first block has 3 images.  The 2nd block has 1 image.  

It displays fine on Desktop.  But some formatting issues on mobile.

See below Desktop View - The first block with App store icons, those are individual images, each with its own hyperlink.

2nd block (screenshots) is all one image.  They display correctly.

On Mobile, they stack funny:

I implemented this solution:

I am Richard Nguyen from PageFly - Advanced Page Builder. I would love to give you some recommendations.

Go to Online Store > Themes > Edit Code >theme.liquid > paste this code before </head> element 

<style>

@media (max-width:767px){       

.custom__item.custom__item--image:nth-child(3),.custom__item.custom__item--image:nth-child(5),.custom__item.custom__item--image:nth-child(7){

        max-width:33.33% !important;

        width:33.33%

               }

}   

</style>

The solution solved the problem, but it created another problem with other custom content image blocks on the same page.  The effect it had was on MOBILE versions, the images shrink to a much smaller size, and they align left, when they should be centered.   

Before FIX: (note: app store icons stack funny, but next image below 'Used by top...'  is correct width)

AFTER FIX:  (note, first set of images -app icons and screenshots) now format correctly.   BUT, last image at bottom shrinks and aligns left)

Any ideas?

Thanks in advance!!

[Ahsan_ANC]

@j_j_j Do you want this style on mobile

[Ahsan_ANC · Accepted solution]

Hi, @j_j_j 

You can try this code

1. Go to Online Store-> Theme->Edit code
2. Asset-> theme.css ->paste the below code at the bottom of the file.

@media screen and (max-width: 768px){
#shopify-section-1660540804ed3c7cd1 .custom-content{
   display: grid !important;
}
}

also, remove the previous code that you added earlier.

[j_j_j]

Here is the problem:

Before the first fix, other image blocks were displaying correctly - for instance, like below:

After the first fix, other image blocks shrink and align left like this on mobile: (see how image below text is tiny and aligned right.   It should be width of screen. 

[Ahsan_ANC]

plz remove this code

[j_j_j]

Which code - the original fix, or the code you provided?

[Ahsan_ANC]

Original fix

[j_j_j]

ok done.

[j_j_j]

Ok, your code did the trick!!   Everything is good now!   Thanks very much.