Solved

Why do my slider images get cut off in mobile view?

sualaksharma
Tourist
6 0 0

I created this website in dawn theme and put some banners in my slider but whenever I use it in mobile version the banner cuts off from the sides. I checked the community answers and saw a code to change in theme.scss but unfortunately my theme doesn't have this code. 

 

Can anyone help in this regard please ?

 

https://3247dd-2.myshopify.com - website link

Accepted Solutions (2)

websensepro
Shopify Partner
1047 146 153

This is an accepted solution.

Hi, @sualaksharma.

 

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

 

@media screen and (max-width: 749px) {
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media {
    height: 16rem !important;
}

}

 

Result:

websensepro_0-1689060059392.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

websensepro
Shopify Partner
1047 146 153

This is an accepted solution.

Hi, @sualaksharma.

 

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

 

@media screen and (max-width: 749px) {

.banner__media.media img {
    height: 160px !important;
    object-fit: fill;
}

.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 16rem !important;
}

}

 

Result:

websensepro_0-1689061236572.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 5 (5)

websensepro
Shopify Partner
1047 146 153

This is an accepted solution.

Hi, @sualaksharma.

 

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

 

@media screen and (max-width: 749px) {
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media {
    height: 16rem !important;
}

}

 

Result:

websensepro_0-1689060059392.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
sualaksharma
Tourist
6 0 0

Thank you so much brother ! It worked wonders. Can I also ask you for another favor? You can see there's a banner below the product categories section (oil, powder, capsules, ointment) where it's written "heal your liver before it gets worse". That image too is getting off the screen in mobile version and the same goes for the map in the contact us page. Can you please help out in that too ? I'll be very grateful to you !!!

websensepro
Shopify Partner
1047 146 153

This is an accepted solution.

Hi, @sualaksharma.

 

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

 

@media screen and (max-width: 749px) {

.banner__media.media img {
    height: 160px !important;
    object-fit: fill;
}

.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 16rem !important;
}

}

 

Result:

websensepro_0-1689061236572.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
sualaksharma
Tourist
6 0 0

Thank you so much, It worked 😄

websensepro
Shopify Partner
1047 146 153

Thanks for marking my solution. We have a dedicated team to help you with SEO, Paid Advertisement as well.

Feel free to let me know if you need any help with these things as well.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here