FROM CACHE - en_header

Image Stacking

Solved
j_j_j
Tourist
8 0 0

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.

  

 

j_j_j_0-1660839181754.png

 

On Mobile, they stack funny:

 

j_j_j_1-1660839181754.png

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)

 

j_j_j_4-1660839862684.png

 

 

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

j_j_j_3-1660839774659.png

Any ideas?

 

 

Thanks in advance!!

Accepted Solution (1)

Accepted Solutions
Ahsan_ANC
Shopify Partner
951 176 189

This is an 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.

> Was my reply helpful? Click Like to let me know!
> Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com
You can get a Free Shopify design error solution and page setup guide.

Shopify Partner | Skype : ahsananc

View solution in original post

Replies 8 (8)
Ahsan_ANC
Shopify Partner
951 176 189

@j_j_j Do you want this style on mobile

 

download.png

> Was my reply helpful? Click Like to let me know!
> Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com
You can get a Free Shopify design error solution and page setup guide.

Shopify Partner | Skype : ahsananc
Ahsan_ANC
Shopify Partner
951 176 189

This is an 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.

> Was my reply helpful? Click Like to let me know!
> Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com
You can get a Free Shopify design error solution and page setup guide.

Shopify Partner | Skype : ahsananc
j_j_j
Tourist
8 0 0

Here is the problem:

 

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

j_j_j_1-1660842832361.png

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. 

j_j_j_2-1660842878870.png

 

Ahsan_ANC
Shopify Partner
951 176 189

plz remove this code

 

download (1).png

> Was my reply helpful? Click Like to let me know!
> Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com
You can get a Free Shopify design error solution and page setup guide.

Shopify Partner | Skype : ahsananc
j_j_j
Tourist
8 0 0
Which code - the original fix, or the code you provided?
Ahsan_ANC
Shopify Partner
951 176 189

Original fix

> Was my reply helpful? Click Like to let me know!
> Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com
You can get a Free Shopify design error solution and page setup guide.

Shopify Partner | Skype : ahsananc
j_j_j
Tourist
8 0 0

ok done.

j_j_j
Tourist
8 0 0

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