Shopify themes, liquid, logos, and UX
I have used a custom image template so I can have custom photos for mobile and desktop although when viewing on mobile my photo clashes with the featured collection. Is there a way to add a margin-bottom to the featured collection to remove this problem?
If possible can you post the required code and area.
Thanks in advance
Solved! Go to the solution
This is an accepted solution.
ok can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
#shopify-section-16243710393ff97216 {margin-top: 90px;}
}
We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?
@KetanKumar
this only seems to be a problem when viewing on mobile phone. When I view it on the preview mode on Shopify it doesn't show but only when I go onto the website via my iPhone 11 Pro Max it is present. Both safari and chrome browsers have been tried.
This is an accepted solution.
ok can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
#shopify-section-16243710393ff97216 {margin-top: 90px;}
}
@KetanKumar
This worked although I only needed the last line of code as the problem only solved it for some screen sizes.
Thanks for your help although
it's my pleasure to help us
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024