CSS change causing major visual regression

  • Resolved scottsawyer

    (@scottsawyer)


    5 months, 1 week ago

    In a recent update, the following CSS was added:

    .woocommerce div.product div.images .woocommerce-product-gallery__image {
          padding: 0 !important;
    }

    I don’t know why exactly, but this is causing the slick track to get huge, creating a giant gap between the main image and the thumb nav. When I comment out the rule, it works fine. I tried adding back padding-top: 0; padding-bottom: 0; and both work fine, but if I add padding-left: 0; or padding-right: 0;, it breaks the page layout. I have no idea why any padding-left or padding-right rule breaks it, I tried unset, inherit, initial, and reset all break the layout as long as either padding-left, or padding-right are in there. So there is definitely a problem.

    Also, using such a specific selector then adding !important is awfully heavy handed.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Niloy

    (@im_niloy)

    Hi,

    We found that many custom themes are adding extra padding for the gallery, which creates unwanted white space in the slider when it moves. That’s why we need to override the rules using CSS. We haven’t encountered any issues while applying this code. Please share the product link or a screen recording to help us understand the problem better.

    Thread Starter scottsawyer

    (@scottsawyer)

    Mentioned in the video, we added padding to the slide, however, this new style rule is overriding our styles. Again, adding such a specific style rule + !important is pretty heavy handed, breaks our design, and wasn’t caught in our automated visual regression tests. I’ve updated our tests so hopefully these kinds of changes will get caught in the future. I understand that some people were having problems with their theme, and I appreciate you wanting to help alleviate people’s problems setting up the plugin, but that seems like a problem that they should resolve in their development stage, as opposed to introducing a new style that can break existing implementations.

    Philosophically, I think plugin styling should be less “opinionated” in general, so themers don’t have to fight someone else’s styling choices. We’ve already spent time making the plugin look “right” on our site, but then a new styling opinion is introduced after development is complete and when the site is in a maintenance cycle, it adds to customer frustration. Luckily, I found the issue before the update was deployed, but I had to spend time (i.e. customer money) to find the problem and fix it.

    Plugin Author Niloy

    (@im_niloy)

    Thank you for the video.
    Have you tried switching the theme? The gap you mentioned should not happen because of the padding. There could be something else. If possible, please share the product URL so I can debug it.

    Thread Starter scottsawyer

    (@scottsawyer)

    @im_niloy Thank you for your offer to debug, however, this is a production site with minified CSS and JS, so there’s not much to see. It took 2 hours to dig around to find the offending line in a local dev env.

    What I am requesting is that you reconsider this line of CSS, particularly the level of specificity including the !important declaration.

    Thanks.

    Plugin Author Niloy

    (@im_niloy)

    Okay, we will remove this code in future release ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.