How to deal with this problem?

Store Design
,
1

This is my webpage:wholesalecrystalstone.com

result_YNNQrE.webp
result_YNNQrE.webp1284×2778 405 KB

2

Hi @David235

To fix the issue with the image

Goto base.css

Find below CSS

@media screen and (max-width: 749px) {
    media-gallery .slider.slider--mobile .grid__item {
        width: calc(var(--slide-container-percentage-width) -(var(--mobile-scroll-padding)* 2) -(var(--grid-mobile-horizontal-spacing)* 2));
    }
}

Replace with below css

@media screen and (max-width: 749px) {
    media-gallery .slider.slider--mobile .grid__item {
        width: 100% !important;
    }
}

Thank you

D.P

3

Hi @David235 ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
@media screen and (max-width: 749px) {
    media-gallery .slider.slider--mobile .grid__item {
        width: 100% !important;
    }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

4

No effect

5

Without this code

6

There is too much white space at the bottom of the mobile phone segment

7

Hello @David235

Currently this is looking fine and everything is working good.
It might be some network issue or cache issue.

8

@media screen and (max-device-width: 480px) {body {-webkit-text-size-adjust: 100%;}}.display-block, splide-component {display: block;}.grid, .list-unstyled, summary {list-style: none;}.customer a, .link, .share-button__button:hover {text-decoration: underline;text-underline-offset: 0.3rem;}.link-with-icon, .nowrap {white-space: nowrap;}.js details[open]:not(.menu-opening)

9

The PC version is normal, but there is a big blank on the mobile version

10

i’ve test your site on my Iphone

and there is no issue i’ve faced on mobile.

11

Can you take a screenshot for me? I haven’t set up any code yet.

12

If you look at the screenshots I took, you’ll understand the problem.

13

Bro can you help me take a look?

14

Can you help me?