How to optimize banner size for desktop and mobile?

Solved
Highlighted
Tourist
7 0 1

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! 

Highlighted
Shopify Partner
3237 711 860

HI

Please share your Webshop URL & password.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
Highlighted
Shopify Partner
9526 1200 3351

Hello, @maurant94 

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
Highlighted
Tourist
7 0 1

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
Highlighted
Shopify Partner
3237 711 860

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
Highlighted
Tourist
7 0 1

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

0 Likes
Highlighted
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
Highlighted
Shopify Partner
3237 711 860

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
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
Highlighted
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