!important CSS Value Preventing Image Re-Sizing

  • Resolved abledragon

    (@abledragon)


    6 years, 9 months ago

    Hi Guys,

    In this file:

    ~/wp-content/plugins/ultimate-product-catalogue/css/catalogue-style.css?ver=4.9.6

    The following CSS selector:

    .upcp-tabbed-main-image-inner img

    …has been given a max-width and max-height value of 400px !important.

    The only way I’ve found to successfully change the size of the primary image on the product detail page is to remove the !important qualification from that core file but, of course, whenever there’s a plugin update this edit is over-written.

    Selecting an image size on the Styling > Detail page of 700px (width and height), whether or not I add the !important qualification, has no effect and neither does adding a new declaration in my theme stylesheet (including the !important qualification). The !important qualification in the plugin core file is preventing me from making any changes. Removing that qualification from the core file enables me to change the image size successfully.

    Please can you either remove that !important qualification from that value in the core file or explain how I can over-ride it and successfully set the primary image on the product detail page to 700px X 700px so that it’s not over-written whenever the plugin is updated.

    Many thanks,

    Martin.

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

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi Martin,

    In this case, we’d suggest trying to add custom code. To do this, edit your catalogue and enter the following CSS in the “Custom CSS” box:

    .upcp-tabbed-main-image-inner img {
max-width: 700px !important;
max-height: 700px !important;}
    Thread Starter abledragon

    (@abledragon)

    Hi Guys,

    Many thanks – that did the trick,

    Cheers,

    Martin.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘!important CSS Value Preventing Image Re-Sizing’ is closed to new replies.