FROM CACHE - en_header

Image wrong size on mobile

Solved
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)

Accepted Solutions
KetanKumar
Shopify Partner
33625 3372 11101

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 22 (22)
KetanKumar
Shopify Partner
33625 3372 11101

@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
33625 3372 11101

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
33625 3372 11101

@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
33625 3372 11101

@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
33625 3372 11101

@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
33625 3372 11101

@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
33625 3372 11101

@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
33625 3372 11101

@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
3 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
33625 3372 11101

@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
3 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