How to optimize banner size for desktop and mobile?

Solved
maurant
Excursionist
24 0 11

Hey! 

I'm having some issues when it comes to optimizing my banner size to fit mobile & desktop. I have the Impulse theme. I couldn't seem to figure out a way to do this. 

I'd appreciate your help. 

Thanks! 

dmwwebartisan
Shopify Partner
5877 1342 1724

HI

Please share your Webshop URL.

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
KetanKumar
Shopify Partner
17365 1874 6488

Hello, @maurant 

Welcome to the Shopify community!
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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
maurant
Excursionist
24 0 11

Sure this is my website: www.puppystylestore.com 

On the desktop, I want it to be a still image instead of the banner sliding up as i scroll down. Also, on how do I make it fit the mobile version? 

The banner design is currently being edited right now, so I won't be using the exact one I have on the store. Do I have to make changes in the sizing of the original banner? Or is it something with the coding? 

Thanks for your help. 

0 Likes
dmwwebartisan
Shopify Partner
5877 1342 1724

This is an accepted solution.

Hi

Please try solution for mobile .

add code assets/theme.scss.liquid or timber.scss.liquid bottom of the file.

 

@media only screen and (max-width:775px){
.hero--mobile--400px:not([data-natural]) {height: 190px !important;}
.hero__image {background-size: contain !important;}
}

Hope this will work for you.


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
maurant
Excursionist
24 0 11

Great! Thank-you! It looks much better on mobile now. 

0 Likes
Airpuria
New Member
1 0 0

Hi! 

My team and I are having a hard time with the mobile optimization. We are wanting the images to look the same and not be cut off when a customer goes from desktop view to mobile view. 

Can anyone help us with this issue? Thank you  

-Ceara 

0 Likes
dmwwebartisan
Shopify Partner
5877 1342 1724

Hey @Airpuria 

Can you please provide  your webshop URL?

I will check and provide you solution here.

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
0 Likes
Koriparker
New Member
1 0 0

I am having the same trouble. I have the mobile set to 600px height but if the graphics is not created with the text in the center than it completely gets cut off on mobile. I have attached pictures and my URL www.koriparker.com

IMG_8335.PNGIMG_8336.PNG

0 Likes
tms258
Tourist
5 0 3

I'm having the same issue Currently using the debut theme and I attempted adding the code that was suggested in a different thread, but no luck. Both my top banner and bottom image are stretched.

https://beuteebathandbody.com/

Screen Shot 2020-08-21 at 12.32.57 AM.pngScreen Shot 2020-08-21 at 12.33.12 AM.png