Re: Banner Image Alignment Issue with Mobile

Solved

How can I fix banner image alignment on mobile in Debut theme?

nickbia
Tourist
7 0 5

Hello! I'm having an issue with banner images on my store when scaling to the mobile site (Debut theme). The images look great on desktop, but when moving to mobile they become framed/zoomed into the middle. I realize this is likely due to something restricting the size in the code, but I am not adept with respect to coding so any assistance in sorting this out would be greatly appreciated!

store URL:  https://bucket-list-prints.myshopify.com/

screenshots below:

Mobile Banner DistortionMobile Banner DistortionDesktop BannerDesktop Banner

Accepted Solution (1)

dmwwebartisan
Shopify Partner
12321 2551 3714

This is an accepted solution.

@nickbia 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 767px){
.image-bar__item {background-size: contain;}
.image-bar--large .image-bar__content, .image-bar--large .image-bar__item {
height: auto;
}
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 15 (15)

noahfromfolds
Shopify Partner
17 2 6

Hi Nick,

The reason this is most likely happening is because you uploaded an image with text on top. Shopify always resizes the images uploaded when on mobile.

The best way to get around this would be by either turning the image into normal text, or creating a second image variation and displaying it only on mobile. This would require custom work, and if you're interested feel free to shoot me a message.

Founder / CEO of Folds Page Builder | Available for free at: https://apps.shopify.com/folds

dmwwebartisan
Shopify Partner
12321 2551 3714

This is an accepted solution.

@nickbia 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 767px){
.image-bar__item {background-size: contain;}
.image-bar--large .image-bar__content, .image-bar--large .image-bar__item {
height: auto;
}
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
nickbia
Tourist
7 0 5

That worked! Thank you so much! I was going crazy searching this forum and trying to figure this out.

Follow up question, how would I get this to work for the image below it as well? It seems to be having the same alignment issue as the top image.

Thanks again.

Nick

dmwwebartisan
Shopify Partner
12321 2551 3714

@nickbia 

To remove the spaces from mobile. Please add the following code.

@media only screen and (max-width: 767px){
.hero--large{ height: 130px !important; }
.ratio-container:after { padding-bottom: 33% !important; }
}

 

Hope this helps.

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
nickbia
Tourist
7 0 5

Yup that worked! There does seem to still be a small bit of space in between the sections. Any idea how to solve that?

Thank you so much for your help! I can start marketing now that the mobile site is good to go.

Best,

Nick

dmwwebartisan
Shopify Partner
12321 2551 3714

@nickbia 

Please provide a screenshot. I will check.

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
nickbia
Tourist
7 0 5

here ya go, thank you!

Screen Shot 2021-02-26 at 8.14.38 AM.png

dmwwebartisan
Shopify Partner
12321 2551 3714

@nickbia 

You mean above "collection" heading?

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
nickbia
Tourist
7 0 5

I am referring to the space between the two images, there is a white space under the copy of "oh, the places you'll go." Is there any way to remove that?

Thanks

Nick

dmwwebartisan
Shopify Partner
12321 2551 3714

@nickbia

Ok, I will check my morning tomorrow. I am going off for today.

Sorry but please provide a screenshot.

I will get back to you with solution soon.

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
nickbia
Tourist
7 0 5

No problem! You've helped me so much already. The screenshot is in the reply to your previous message. Thank you.

Best,

Nick

dmwwebartisan
Shopify Partner
12321 2551 3714

@nickbia 

Please add the code to remove that space.

.index-section--flush + .index-section--flush {
    margin-top: -75px !important;
}

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
PeterSdrops
Tourist
22 0 1

Sorry to bother after 2 years but i have the same exact problem on craft 2.0 theme and i cant find the theme.css file .

 

my url is www.southdrops.eu and the password is southdrops2023 if you can check it out for me please.

Estoresolutions
Shopify Partner
23 0 2

Hey @nickbia , We visited your store (bucket-list-prints.myshopify.com) and we can say that is it a very good and unique store but on collections and product pages title is not showing. we have also found the error that is your text font color is the same as the background color. Change the text color so that it can be viewed. We are also suggesting a Shopify App "Fast View". Please view the example store of the app for better understanding, Apps Link - Fast View.

Hope you like our feedback, Thanks.

nickbia
Tourist
7 0 5
Hey!

Thank you so much for the feedback! It's very much appreciated. I built the
store completely by myself and am still learning how to put everything in
place properly. Unfortunately due to the business of my full-time job I
haven't been able to put as much time into it lately as I'd like.

I will absolutely be going this weekend to make some adjustments so your
timing is perfect!

All the best,

Nick