Mobile slideshow size reduction in refresh theme

Store Design
1

My image size does not fit into my slideshow in my mobile view. But in my webview there are no issues. Please let me know how to reduce my slideshow size, so that my image fits into it.

website screenshot.jpg
website screenshot.jpg1885×892 189 KB

mobile screenshot.jpg
mobile screenshot.jpg620×1386 54.8 KB

2

Hello @FreshKingdom

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.banner__media {
    height: 100% !important;
}
3

Thanks for your response.

Before implementing, I have few queries.

Is this code only to change mobile view or both mobile and computer views.

Computer view is ok for , only I need to change mobile view

4

Hello @FreshKingdom

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (min-width: 750px){
.banner__media {
    height: 100% !important;
}
5

Hi,

I tried this code, but it is not working.

mobile screen.jpg
mobile screen.jpg572×1280 44.9 KB

6

I tried this one also and it gives an enlarged image. My expectation is slideshow size has to fit the image size

mobile screen2.jpg
mobile screen2.jpg572×1280 50.5 KB

and not image to fit into slideshow size. im ok if the image size is small.

Thanks for your help

7

@FreshKingdom , add this code at the bottom of the base.css file

.media>img{
min-height: auto !important;
}

.slideshow__media.banner__media.media{
height: auto !important;
}

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

8

It worked. Thanks for your help.

9

add this extra piece of code

@media screen and (max-width: 749px)
.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
display: none;
}