Need a CSS guru please

For the life of me, can't figure out why the individual elements in the color pickers on my product pages are not displaying consistenly on smaller mobile screens.

See this little vid to see the issue:

We've gone over the CSS & media queries but just cant seem to find what is causing this odd re-assortment of those elements when the screen is resized.

  • Pawel
    • Staff

    Hello Steve!

    Hope you are having a good day!

    I checked your site and the issue seems to come from the fact that the items in the colour pickers use images of different size, not from CSS itself. There's a tiny difference of just one pixel of height and this is causing the items to be aligned incorrectly when the width of the viewport changes. Normally, the items would just jump in place correctly, but due to the difference in size, some "get stuck".

    Fixing this via CSS would become very cumbersome and error prone, as we would have to add complex rules for each element that is of different size. It might work, but a better and more stable solution would be to simply fix the images themselves.

    To fix this issue, you would have to go to your site's Media Library, edit each image representing a colour and make sure all of the images are of the same size (please see attached screenshot). Currently the images are either 70x87 or 70x88.

    Kind regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.