Shopify themes, liquid, logos, and UX
My store is https://hespeakstoday.com/. There is an image in the middle of the page that does not show well in mobile view. Would someone please help?
Solved! Go to the solution
This is an accepted solution.
Thanks
can you please try this
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 (max-width: 749px) {
#shopify-section-160572568715f8fdf7 .image-bar__item {
background-size: contain;
}
}
Hello, @LeighK
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your issue screenshot,
So I will check and provide a solution here.
Thanks so much for your reply. I have two similar issues.
First, I have an image that I added to the homepage through the gallery section. Only a portion of the image can be seen on a mobile device. I have screen shots of both the mobile and the desktop.
Second is a similar issue. I added an image above the banner using the Slideshow section. It displays perfectly fine on the desktop; however, in the mobile view the background is not visible. Only the text is visible.
Both images are attached. Any help will be appreciated.
This is an accepted solution.
Thanks
can you please try this
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 (max-width: 749px) {
#shopify-section-160572568715f8fdf7 .image-bar__item {
background-size: contain;
}
}
Thank you! This worked. I can totally see the middle image in the mobile view.
I am still working on the top image immediately above the banner.
Thanks for update and support.
hi @KetanKumar 🙂 would you be able to help me on a similar issue, but for a background video? it's showing up too large on mobile but perfect on desktop. i would like to contain or make smaller on mobile! here is the link to the issue:
url: shopkihk.com
using icon template
thanks so much in advance if you are able
Hello,
I am having this same issue with the mobile format. My entire image isn’t being loaded. It’s cut off. I entered the code referenced in this thread and it didn’t solve my issue. Could you assist me?
Thank you
Hello, @Jwatkin8
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Thanks for URL
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 (max-width: 600px) {
#shopify-section-slideshow .hero .hero__image {
height: 55%;
}
}
Thanks
can you please let me know how to look right now?
Here is a screenshot from my phone of how it looks.
Thanks
it can be done some custom code on mobile device
I don’t understand. Is this not something that you can assist me with. I tried it on two different phones and it’s the same thing.
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
Email sent to bamaniyaketan.sky@gmail.com
Thanks for it
i will check and let you know
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