I appreciate it so much any feedback
Samson Sham
@samsonshamAll comments
- @Facu3071Submitted over 2 years ago@samsonshamPosted over 2 years ago
Hello Facundo π Congratulations for completing this challenge π I see you make good use of grid box and calculate the row and column nicelyπ
Some of my suggestions below:
- I see you have imported the font family Poppins but I couldn't see you are using it.
font-family: 'Poppins', sans-serif;
So you might not be intentionally not using the given font, right? - I see you put the first part of heading into
<span>
. It should be part of the heading so is semantically better to put it intoh1
as well and add necessary<strong>
and line break. And<span>
is an inline element so be careful your using might cause some unwanted inline effect. - Incorrect icon in Calculator card.
Hope this helps! Have a nice day!
Marked as helpful0 - I see you have imported the font family Poppins but I couldn't see you are using it.
- @EricLDevSubmitted over 2 years ago
Hi there,
I had some difficulties styling the "share" button when clicked, as I could'nt find any svg provided with the starter kit downloaded. Any idea ?
thanks.
@samsonshamPosted over 2 years agoHello Eric π Congratulations for finishing this challengeπ Your solution looks nice!
When I was doing this challenge, I also noticed there was only one svg for the share button. That was the non-active state. This could mean that if we want an active state image, we have to some how massage the image by ourselves before using it.
From the design we know the active state share icon is white in colour. I found an answer in this discussion by using
filter: brightness(0) invert(1);
to do the trick.How it works: It first change your svg to black by
brightness(0)
and then change it to white byinvert(1)
.Hope it helps πͺ
1 - @al-latteSubmitted over 2 years ago
Hey y'all ! ππ½
I finally got my hands dirty with some CSS Grid in this challenge. I do have a problem though, I got some side scrolling and I don't know what's causing it. If any of you amazing humans can help me out that'd be great π.
@samsonshamPosted over 2 years agoHello Kally!π You did a great job on this challengeπ The responsive design is nice, especially the tablet view. I like it very much.π
For the scrolling, I found it caused by the
margin
in.container
that you are applying 5% on margin top and bottom. I am afraid if it would be too much for the total page height. As percentage is relative unit and it would be a bit hard to calculate and control if you put it to height. You may reset it to 0 then try some other ways.- A quick and dirty way is to add
overflow: hidden;
to body so no more scrolling (remember to undo it in mobile view otherwise you can't scroll in mobile). - If you only want some head space you might only add
padding-top
ormargin-top
to avoid unwanted bottom space. - If you want to make your container align centre vertically, you can set
display: flex; align-items:center;
inbody
.
Hope it would help! πͺ
1 - A quick and dirty way is to add