The site cookeryschool.com.ua (site on WordPress) has a slider with courses (made using bx-slider), on different width screens the slider is displayed differently (4 in a row, 3 in a row, 2 in a row and on smartphones 1 in a row). As soon as you enter the site from any iPhone and scroll down to this slider, the slider is displayed like this:

problem

But if you click on the arrow to the right or left, then everything falls into place:

That is how it should be:

enter image description here

This problem is observed only on apple smartphones, on the androids of this bug is not detected, tell me how to solve?

    1 answer 1

    Apparently the layout breaks, but since I don’t see the code, I advise you to use the following code for the slider:

    .wrapper { display: flex; flex-wrap: wrap; justify-content: center; } .slide { display: block; height: 150px; width: 150px; margin: 15px; background: url(http://krolik74.kpeatop.com/hosting.png) no-repeat; } 
     <div class='wrapper'> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div>

    JSFiddle example

    • Unfortunately it did not help. - Homie
    • Have you tried?) flex works in safari . If that doesn’t help, then the problem is specifically with the iPhone, everything on my Mac does very well. - Zicrael
    • Yes, I added these properties to the external block, but I say that the problem is only on Apple smartphones, on all other devices of the norms. - Homie
    • It is necessary not just to add, but also to do as above, that is, to set the width and height of the slider blocks. And on the test iPhone safari long been updated? - Zicrael
    • They indicate the width and height, just a little different, I do not know when they updated the safari, the iPhone is not mine. But this was checked on several different iPhones and the same bug everywhere. - Homie