How to give quickview card margin or padding

Store Design
1

Hi,

I am running into some issues giving the quick view shopping button margin or padding. Whenever I’m adding margin or padding it’s a.) only applying it to the left side or vice versa with width of the button being offset.

This is in reference to the Reformation theme

Regular

Screenshot 2023-03-02 at 1.37.40 PM.png
Screenshot 2023-03-02 at 1.37.40 PM.png516×782 11.6 KB

With margin or padding CSS

offset not centered
offset not centered528×786 11.8 KB

Desired outcome

Desired
Desired922×1050 178 KB

2

Hi @goodera ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/product-grid.css->paste below code at the bottom of the file:

.product-card .product-card-quickview {
   right: 10px !important;
   left: 10px !important;
   bottom: 10px !important;
   transform: translateY(140%)!important;
}

Hope my answer will help you.

Best regards,

Victor | PageFly

3

I appreciate the response! The code is stopping the hover transition so that it’s not visible.. :confused:

4

Width: auto !important seems to have had a great effect! Got it fixed! Thanks for your help.

.product-card-quickview {
  background-color: white !important;
  color: #000 !important;
  right: 10px !important;
  left: 10px !important;
  bottom: 10px !important;
  width: auto !important;
}