Shopify themes, liquid, logos, and UX
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
Then ofc you may test it through this link
https://799iq97ppjv6u8zq-56150523956.shopifypreview.com
Solved! Go to the solution
This is an accepted solution.
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.
We hope that this can help you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS
BSS Commerce - Shopify Apps & Store Development Service Provider
Hire a Shopify expert | Shopify Plus Store Development
This is an accepted solution.
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.
We hope that this can help you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS
BSS Commerce - Shopify Apps & Store Development Service Provider
Hire a Shopify expert | Shopify Plus Store Development
Thank you very much! I figured out my mistake it was because display was flex, now its better. I appreciate your help btw!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024