Shopify themes, liquid, logos, and UX
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!!
Solved! Go to the solution
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.
@j_j_j Do you want this style on mobile
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.
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.
plz remove this code
Original fix
ok done.
Ok, your code did the trick!! Everything is good now! Thanks very much.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024