How do I optimize mobile banners?

Shopjawdropper
Tourist
7 0 2

Hi there,

Currently the banners on my home & product page are oversized when viewing on mobile & I'm trying to optimize them to fit.

My Shopify url is shopjawdropper.myshopify.com & password is: password

 

Any help is greatly appreciated!

 

HardikDavra
Shopify Partner
2320 364 994

@Shopjawdropper 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

.hero-slider {
    object-fit: contain !important;
    height: 100%;
}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
KetanKumar
Shopify Partner
20390 2112 7670

@Shopjawdropper 

sorry for that issue if you need only singal banenr tyr this 

https://www.mojoin.com/show-shopify-banner-image/

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Shopjawdropper
Tourist
7 0 2

Hi there,

I tried adding this however nothing changed.

0 Likes
Shopjawdropper
Tourist
7 0 2

Hi there,

 

Thank you for your reply.

 

I have 2 banners on the home page and 2 on the product page.

0 Likes
orangegrove
Excursionist
12 1 0

Optimise as in reduce file size?  I use tinyjpg  https://tinyjpg.com/

0 Likes
Shopjawdropper
Tourist
7 0 2

Not exactly, the pictures are far too big on mobile. I tried using the link you sent however it didn't change the outcome.

 

Thank you for your response.

0 Likes
Shopjawdropper
Tourist
7 0 2

Update: I tried designing a mobile sized banner (1080x1350) to use in the mobile option. This still stretched out the image.

 

I've got no idea why it is appearing so large on my mobile.

0 Likes
orangegrove
Excursionist
12 1 0

So you actually need to resize the image, not the file size?  Have a look here https://www.shopify.co.nz/tools/image-resizer

0 Likes
orangegrove
Excursionist
12 1 0

https://www.shopify.co.nz/tools/image-resizer

Try this

 

Oh hang on, I had the same problem and css code wasnt fixing it, so I looked it up, changed to slideshow and it worked.  mobile-header-PM.jpg

0 Likes