Custom Quick to add CSS Code (Dawn Theme)

Store Design
, , ,
1

Hi, so I customized the quick to add button into a button with only icon no text (Please see image reference). But my concern is that everytime i click the button the icon become so tiny (You may test it with this link).

Here is the css of the button

.quick-add-svg{
    width: 30px;
    height: 30px;
    border: 1px;
    background: #00000040;
    border-radius: 50px;
    position: relative;
    bottom: 130px;
    left: 10px;
    display: flex;
    color: white;
    align-items: center;
    padding:5px;
    box-sizing: border-box;
    cursor:pointer;
}

This plus icon from the image is what I am referring to

newuser01_0-1679933228714.png
newuser01_0-1679933228714.png1823×476 154 KB

Then ofc you may test it through this link

https://799iq97ppjv6u8zq-56150523956.shopifypreview.com

2

Hi @newuser01

We tested it and found that every time we hover over the icon, the width and height properties are set to 24 px (as shown below). To fix that error, you need to find that class and have the hover state, and edit the width and height properties you want.

view (10).png
view (10).png1891×848 305 KB

We hope that this can help you.

3

Thank you very much! I figured out my mistake it was because display was flex, now its better. I appreciate your help btw!

1 Like