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

[nickbia]

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 DistortionDesktop Banner

[noahfromfolds]

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.

[dmwwebartisan · 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!

[nickbia]

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]

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

[nickbia]

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]

@nickbia 

Please provide a screenshot. I will check.

[nickbia]

here ya go, thank you!

[dmwwebartisan]

@nickbia 

You mean above "collection" heading?

[nickbia]

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]

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

[nickbia]

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

Best,

Nick

[dmwwebartisan]

@nickbia 

Please add the code to remove that space.

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

Hope this works.

Thanks! 

[PeterSdrops]

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]

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]

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