Solved

Why is my homepage image not displaying correctly on mobile in Debut theme?

Otto18
Tourist
3 0 2

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 🙂

Screenshot 2021-02-17 at 17.05.39.pngScreenshot 2021-02-17 at 17.05.10.png

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Otto18 

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;}
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 24 (24)

KetanKumar
Shopify Partner
36839 3635 11972

@Otto18 

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.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Otto18
Tourist
3 0 2

Thank you for your response!

The URL is https://frankstreatbox.co.uk/

 

Thank you 🙂 

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Otto18 

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;}
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Otto18
Tourist
3 0 2

Worked perfectly, thanks so much!

KetanKumar
Shopify Partner
36839 3635 11972

@Otto18 

it's my pleasure to help us.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
allemich
Tourist
7 0 6

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

KetanKumar
Shopify Partner
36839 3635 11972

@allemich 

sorry for this issue but your store is password protect please share us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
allemich
Tourist
7 0 6

@KetanKumar 

 

Sorry, password is 'cliasa'

pineappleboxjewelry.com

KetanKumar
Shopify Partner
36839 3635 11972

@allemich 

thanks for details 

if possible to share issue image bcz i can't see any issue 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
allemich
Tourist
7 0 6

@KetanKumar 

On the desktop, the whole image shows like this:

allemich_0-1620250546354.png

 

On mobile, it cuts off the main focal point of the image, which is the person holding the pineapple:

allemich_0-1620250457605.png

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. 

 

KetanKumar
Shopify Partner
36839 3635 11972

@allemich 

do you mean like this?

KetanKumar_0-1620284651049.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
allemich
Tourist
7 0 6

@KetanKumar yes, just like that!

Can you also advise me on the other two concerns as well?

KetanKumar
Shopify Partner
36839 3635 11972

@allemich 

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;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
allemich
Tourist
7 0 6

This works great, thank you! @KetanKumar 

KetanKumar
Shopify Partner
36839 3635 11972

@allemich 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
makemefeel
Tourist
4 0 1

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 

KetanKumar
Shopify Partner
36839 3635 11972

@makemefeel 

sorry store url doesn't work can you please check

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
makemefeel
Tourist
4 0 1

So sorry: here it is: 

https://thefrenchpharmacy.co/

LaurenGlacia
Excursionist
29 0 11

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.

Desktop BannerDesktop BannerMobile BannerMobile Banner

Please help.

My url is www.laurenglacia.com

KetanKumar
Shopify Partner
36839 3635 11972

@LaurenGlacia 

yes i have provide solution your first post please check

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Gobinath1990
Visitor
1 0 0

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 theeditDesktop.pngMobile.png

norahnewhouse
Tourist
28 0 0

is the code the same for Focal theme?

norahnewhouse
Tourist
28 0 0

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?

UTS_Julia
Visitor
1 0 0

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)