Margin Between Product Title and Button

[weatherstone]

Good afternoon,

1. I am trying to remove the margin between the product and title buttons on every product in the shop archive, as pictured here: https://prnt.sc/k4v6r6. There used to be pricing meta data there, but I have set it to not display. Now I can’t seem to reduce that space.

2. I notice when that same archive page is viewed on mobile, the products have a an additional 15px margin appearing below them as well. That shouldn’t be there.

Thank you,
J

[mldarshana]

Hi There @weatherstone

Thanks for writing in! Try adding the following CSS rules into your X > Theme Options > CSS area and then adjust the values accordingly to your requirement.

.woocommerce li.product .entry-header h3 {
    margin: 0;
}
.woocommerce li.product .entry-header .button {
    margin: 0;
}

Hope that helps.

[weatherstone]

Great! Thank you so much. I was able to play with this a little to better configure it.

I notice that all the buttons from the screenshot are now bold. I tried setting the font weight to normal with CSS but it doesn’t seem to be affecting it. Are you also noticing that?

Thank you,
J

[nabeel]

Hey J,

Thanks for the update. I checked your site and I see you’ve the following code in your Child Theme’s style.css:

.woocommerce li.product .entry-header .button {
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-align: left;
    width: auto;
    padding-left: 10px;
    margin-left: 20px;
    font-weight: bold !important;
}

Just remove font-weight: bold !important; from the above code to fix the issue.

Cheers!