Button is aligning to the left when using max-width-CodePudding

This is my first post here. I'm trying to customize a button of "Add to wishlist"/ "It's already in wishlist" text in it to a website for a client, and that button is found in 2 separate pages. It's a website I made in Wordpress and Elementor mostly, but I have to customize that button myself because I can't do it from Wp/Elementor.

I've used this code to customize that button:

.tinvwl-loop-button-wrapper{

  background-color: #222529 !important;
  padding: 4px 5px 4px 4px !important;
  margin: 10px 25px 0px 25px !important;
  font-size: 14px !important;
  border-radius: 3px !important;
  font-weight: 600;
  }

The problem is that in the Product page the button looks well in Related Products (Produse Similare in Romanian language) section of the page, but in the Shop page (called Magazin in Romanian) the button has too much space left and right of the text.

I noticed that the buttons share the same classes in both pages, so if I add something like max-width: 160px; then the button goes far to the left in Shop page, and adding margin-left to it won't work because then it ruins the button on the other page. What can I do to remove all that space left and right inside of the button and have the button similar to the "Read more" (Citeste mai mult) or "Add to cart" (Adauga in cos) buttons?

PS. I know I used too much the !important rule. It's my first ever website where I'm using CSS and removing the rule from all the code could potentially ruin it all I think and I'd have to start from scratch.

Product page

Shop page

CodePudding user response：

You can add a separate class for one of the buttons where you set the margins you need.

CodePudding user response：

Simple replace with it, it will working fine

.tinvwl-loop-button-wrapper {
    margin: 10px 41px 0px 41px !important;
}

CodePudding user response：

The problem is the background color is set to the button wrapper in loop page.

.tinvwl-loop-button-wrapper {
   background-color: #222529 !important;
}

you need to remove the above css line and add it to the button itself.

.tinvwl_add_to_wishlist_button {
    background-color: #222529 !important;
}

you will need to add some padding then to the button. There are many !important statements overriding each others. you will need to adjust that, It will be much harder to fix later by adding more.