Shopify themes, liquid, logos, and UX
Hi, i'm having issues with one of the images on my homepage, as you can see it fits perfectly on the desktop but it all gets cut off on the mobile view. I am using the Debut theme.
Thanks 🙂
Solved! Go to the solution
This is an accepted solution.
Thanks for the store URL.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
@media only screen and (max-width: 749px) {
#shopify-section-hero-1 .hero--large {height: 260px;}
}
Sorry for facing this issue, it's my pleasure to help us.
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.
This is an accepted solution.
Thanks for the store URL.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
@media only screen and (max-width: 749px) {
#shopify-section-hero-1 .hero--large {height: 260px;}
}
Worked perfectly, thanks so much!
it's my pleasure to help us.
I am having the same issue...tried adding this code and it is not working. Any idea what might be wrong?
My url is https://pineappleboxjewelry.com
sorry for this issue but your store is password protect please share us
thanks for details
if possible to share issue image bcz i can't see any issue
On the desktop, the whole image shows like this:
On mobile, it cuts off the main focal point of the image, which is the person holding the pineapple:
I would like the full image to be viewable in the mobile view, or at least be able to align it to the right.
In addition to this image issue, I have a couple other questions:
1. How do I change the font color of the password page? I've followed instructions to change from the Color menu, but that just changes the other pages; it does not change the password page.
2. How can I change the spacing between the logo and the 'Coming Soon'...it is way too close together.
do you mean like this?
@KetanKumar yes, just like that!
Can you also advise me on the other two concerns as well?
thanks for confirming please add 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 (max-width: 749px) {
.password-page {background-position: -750px 0px;}
}
it's my pleasure to help us
Hi,
I have the same sort of issue: Theme is DEBUT and images are all fine on desktop and by brands on mobile but if searched by categories it is all uneven.
I have tried the edits proposed on this conversation but it didn't work: could you help ?
Shop is: www.thefrenchpharmacy.co
Many thanks
sorry store url doesn't work can you please check
Hi,
I face similar issues like most others about the mobile banner being cut off (while the desktop version looks fine).
I have tried pasting your codes in the solution you provided, but nothing worked for me.
Please help.
My url is www.laurenglacia.com
yes i have provide solution your first post please check
Hello Ketan, we are facing the similar issue that mobile images not displaying as dekstop's. the url is https://the-edit-uae.myshopify.com/ and password is theedit
is the code the same for Focal theme?
I have photos on the homepage of my site (www.newhouseofvintage.com) password is ropowg
and they are showing up perfectly on desktop but on mobile they are way too big and don't show the whole photo. what is the code to fix this on focal?
I'm facing the same issue but seem to only have "theme.js" and "theme.scss.liquid" to choose from under Assets. I've tried the code under both but had no success in resizing for mobile.
Thank you!
https://underthestairspaperco.com/
(The Mom Room x Under the Stairs banner image)
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