Kevin Powell - Community•3y ago

Svg sizing issue...

I am trying to do replicate a design from frontend mentors. There is a "shopping cart" svg they provided that should be in a button with "Add to Cart" text. Now, the problem is that when I put the svg next to the text, the svg appears to be massive and can't be controlled. Please help. Button without the svg (Looks ok):

<button class="btn"><p class="button-text"><strong>Add to Cart</strong></p></button>

<button class="btn"><p class="button-text"><strong>Add to Cart</strong></p></button>

Button with the svg:

<button class="btn"><img src="images/icon-cart.svg" alt="Cart" class="icon">Add to Cart</button>

<button class="btn"><img src="images/icon-cart.svg" alt="Cart" class="icon">Add to Cart</button>

svg (shopping cart):

<svg width="15" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z" fill="#FFF"/></svg>

<svg width="15" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z" fill="#FFF"/></svg>

Please help. 🥺

13 Replies

Shayokh•3y ago

.btn{
    font-size: 14px;
    font-family: Montserrat;
    font-weight: 500;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
    margin-top: 30px;
    display: flex;
    background-color: var(--dark-cyan);
    width: 100%;
    height: 50px;
}


.btn:hover{
    background-color: hsl(157, 35%, 22%);
}

.btn{
    font-size: 14px;
    font-family: Montserrat;
    font-weight: 500;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
    margin-top: 30px;
    display: flex;
    background-color: var(--dark-cyan);
    width: 100%;
    height: 50px;
}


.btn:hover{
    background-color: hsl(157, 35%, 22%);
}

Ohh most frustratingly, I found out that the videos on youtube showing how to build this exact UI easily handles the svg issue without any hassle! But I have no idea what's wrong with mine... Here...

Shayokh•3y ago

https://www.youtube.com/watch?v=BMOH4zSLTnQ

tsbsankara

YouTube

Product Preview Card Component - Frontend Mentor Challenge

In this video we are going to build the Product Preview Card Component from Frontend Mentor. Enjoy. Please like the video and subscribe to the channel if you're not already :). Thank you. Subscribe here: https://bit.ly/3qsAsNC GiHub Repo: https://github.com/SankThomas/product-preview-component Live Website: https://tsbsankara-product-preview-c...

~MARSMAN~•3y ago

You gotta give your SVG a height and width The svg now is set to 15px height and 16px width You should give it a % so it adjust itself based on it's parent, which in this case the button. Something Like this :

.btn > svg {
    height : 50%;
    width : 15px
}

.btn > svg {
    height : 50%;
    width : 15px
}

Shayokh•3y ago

Ok lemme try Thanks a lot!

~MARSMAN~•3y ago

Dealing with svg is like dealing with img you have to set a width and height to them whether relative to a parent container or with Thier own height and width.

Shayokh•3y ago

It worked!

~MARSMAN~•3y ago

Great

Mannix•3y ago

weird that it appeared so big since it has height and width declared

~MARSMAN~•3y ago

Yep I'm wondering too lol

Mannix•3y ago

https://codepen.io/MannixMD/pen/RwyMwmB it looks ok here

Mannix

CodePen