Zero Margin on Product Image

  • Resolved naestanteonline

    (@naestanteonline)


    6 years, 4 months ago

    I’m running a seat reservation plugin that’s embedded on my product page. The problem is, the product image has a right margin that’s making the product summary break to the other line.

    I could identify the product image class and zero the margin so the product summary could go right back up; the problem is, I can’t identify which specific class I should zero the margin on the theme’s CSS. It seems to be a bunch of classes bundled together.

    Here’s a picture of the product page. You can see the summary is down below the product image.

    View post on imgur.com

    And here’s the div info using the inspection tool. You can see all the class names bundled under one div. And the margin highlighted in peach.

    View post on imgur.com

    And here’s the product page right after I manually edit the margin to be zeroed. I need to edit the specific class in the child theme css to stop the product summary from breaking under.

    View post on imgur.com

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Aashik P – a11n

    (@aashik)

    6 years, 4 months ago

    Hi there!

    I don’t see a link to the product page, or the System Status Report, but the CSS property you need to target is the one you’ve highlighted in https://imgur.com/MlHUKmV

    That said, please do note that this does not come from the default WooCommerce template. For questions on optimizing CSS that’s specific to, or added by a plugin, or your theme, please reach out to the theme developers directly.

    I’ll mark this topic as solved for now. Please feel free to open a new topic if you have any other questions.

    —

    If you can replicate this behavior on product types that come by default with WooCommerce, or on a stock theme like Storefront, please feel free to get back to us with more details on that.

    Thread Starter naestanteonline

    (@naestanteonline)

    6 years, 4 months ago

    Hello. I’m actually using Storefront. Sorry that I’ve forgot to point that out.

    I actually didn’t post the link to the product page cause I had to maintain the site under construction since it’s still under development, but I’ve opened it for now:

    https://studioletsmove.com/produto/segunda-feira/

    I know the css property is the one highlighted but, like I said, I still need to identify which specific class I should use to set a zero margin on the theme file.

    Plugin Support Aashik P – a11n

    (@aashik)

    6 years, 4 months ago

    Hi there!

    I actually didn’t post the link to the product page cause I had to maintain the site under construction since it’s still under development, but I’ve opened it for now:

    https://studioletsmove.com/produto/segunda-feira/

    Thank you for your clarification on that. Taking another look at the product page itself, it looks like you’ve managed to fix the CSS to accommodate for the changes applied by your seat reservation extension:

    single product page
    Link to image: https://d.pr/i/CFXj7i

    If you’re still seeing this behavior on any other product type that comes built-in with WooCommerce, please feel free to respond to this topic with more details.

    If the problem is only with products created with that extension, I’d recommend reaching out to the plugin devs for the right way forward here.

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

The topic ‘Zero Margin on Product Image’ is closed to new replies.