How can I resize images for better mobile view on my website?

Store Design
1

Hi there,

the mobile view of my website cuts off images and narrows 2 columns into 1. I’d love some help resizing this please. www.littletoesch.com using the capital theme.

@Akibhusen ?

@KetanKumar ?

1 Like
2

@bgold

can you please share issue images?

3

I will send them to you

4

@bgold

ok i will be waiting

5

@bgold

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-index.min.css ->paste below code at the bottom of the file.
@media (max-width: 720px) {
.slideshow-wrapper:not(.slideshow-same-height) img {
    height: auto;
    object-fit: contain;
}
}
6

it’s better, but now the images are too small - there’s a big gap between the image and the slider bar

1 Like
7

@bgold

can you please confirm this

KetanKumar_0-1640679554858.png
KetanKumar_0-1640679554858.png1920×1080 446 KB

8

not seeing that edit

9

thats what it should look like, but the code you gave me didnt do that

1 Like
10

@bgold

yes, please add this code also

@media (max-width: 720px) { 
.slideshow-wrapper:not(.slideshow-same-height) .slick-list, .slideshow-wrapper:not(.slideshow-same-height) .slick-track, .slideshow-wrapper:not(.slideshow-same-height) .slideshow-content-wrapper {
    height: 100%;
}
.slick-slide {min-height: 100% !important;}
 }
1 Like
11

Thank you, it’s much better, but there’s still a small white space. The images are also cropped on the desktop view, and this shows the entire image - it should be zoomed in a little bit more. I sent you pictures @KetanKumar

1 Like
12

@bgold

i have check now its proper look i can’t see blank spacing as per your screenshot

13

I highlighted the blank space @KetanKumar

14

yes i know bt i have check my device i can’t see sorry

15

it doesnt show up on your device? Can you still help with the code please?

1 Like
16

@bgold

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

17

in safari on a cell phone

18

@bgold

yes please try this code

@supports (-webkit-touch-callout: none) {
.slideshow-wrapper:not(.slideshow-same-height) .slick-list, .slideshow-wrapper:not(.slideshow-same-height) .slick-track, .slideshow-wrapper:not(.slideshow-same-height) .slideshow-content-wrapper {
    height: 180px;
}
}
19

Thank you. I added the code but it didn’t change anything. Is there another code I can try?

@KetanKumar

20

@bgold

if possible to staff account so i will check my end