Image Sizes

Hi Chatham,

If the images are not being resized based on your code, this is most likely a theme issue. Is your theme WooCommerce compatible?

Thanks!
Beka

Hi Beka,

Yes, woocommerce came with the theme (Mayashop) and it’s add-on related, I think, or a woocommerce !important setting that I can’t override.

So I found the problem.

There is some inline:170 code that is overriding the image size for the tab.

View post on imgur.com

How can I get rid of this code or override it?

My recommendation would be to edit the relevant style in the theme’s style.css where those rules seem to be defined. It’s true that you can’t override rules marked with !important; well you can, the final rule marked as !important will be used, so you could copy whatever the offending rule is to the bottom of the stylesheet and modify as needed. Of course all this assumes some familiarity with CSS, so hopefully you feel comfortable in that department ??

— Justin

Something is overriding it.

https://i.imgur.com/u43oJFN.png

Where is that code coming from?

Hey Chatham,

Sorry for the delay in getting back to you. In response to your review, we do do our best to support these free plugins, but we have to give support priority to our paid ones (per our developer agreement with WooThemes), and lately the support load has been especially high. So again, my apologies for the delay, but that’s the reason behind it anyhow.

Now, the other issue is that it’s fairly difficult for us to provide support for 3rd party themes. You asked “where is that code coming from?” which line were you referring to? the width:540px one? As the inspector says, that rule is apparently included right in the body of the webpage, at line 170 as indicated. There’s actually not a whole lot of help that I can offer without actually inspecting your site frontend; can you provide a link to it and tell me exactly what result you’re looking for? I’d be happy to try and help you get this up and running, but I’ll need additional info to be of help, by playing around with your site directly.

Hope we can get this resolved for you

— Justin

Hi Justin,

Thanks for your response. I understand you guys must be swamped.

Here is the product:
https://www.melvedydesigns.com/product/fuchsia-teal-and-taupe-paisley-swirl-custom-personalized-and-monogrammed-planner/

The “Product Add-Ons” tab is what I inspected.

Alright, I see the tab, and a bunch of images. So which image(s) are incorrect, and what needs to be done to them?

They are all incorrect. They all should be able to be resized with CSS changes.

Ok, well this really just requires a basic understanding of CSS selector precedence, which is pretty easy. You should be able to override the div.product div.images img { width: 540px; } rule by adding in another selector to make a new, more specific rule. Perhaps:

div.product div.images div.panel img { width: 100px; }

Using whatever width you prefer. This should be able to go into your theme’s styles.css

Tried that in 4 different locations. The main CSS, the theme CSS (and the overriding child editor), woocommerce CSS.

The inline is coming from somewhere to override it.

I just took a look at the site but didn’t see that rule defined so I couldn’t tell you why it might not be being applied. It’s fairly tricky to diagnose/fix theme issues over this type of a support system; you might have better/faster results to hire a competent WordPress designer to assist you (there’s a lot out there so they’re pretty reasonably priced). I realize that this content is displayed within the tab added by our plugin, but the plugin has no control over how that content is styled, that’s determined by the theme, so a designer could really give you the best results.

I do hope this helps,
Justin

Thanks, Justin. Will keep exploring.