Banner Image Alignment Issue with Mobile

Solved
nickbia
Tourist
6 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

SaphiraDev
New Member
3 0 0

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.

Professional Front-End Developer | Available for work | Contact at: saphiradev@gmail.com
0 Likes
dmwwebartisan
Shopify Partner
5297 1224 1573

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
Advanced Shopify Page Builder to customize your pages - check here PageFly App
nickbia
Tourist
6 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
5297 1224 1573

@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
Advanced Shopify Page Builder to customize your pages - check here PageFly App
nickbia
Tourist
6 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
5297 1224 1573

@nickbia 

Please provide a screenshot. I will check.

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
nickbia
Tourist
6 0 5

here ya go, thank you!

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

0 Likes
dmwwebartisan
Shopify Partner
5297 1224 1573

@nickbia 

You mean above "collection" heading?

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
nickbia
Tourist
6 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