Latest solutions
Latest comments
- @saharzakersoltani@sirajshaon
Great Job!!!
- @srsanjaykumar@sirajshaon
Great! It can be more adjustable if use grid instead flex.
- @smgr7What are you most proud of, and what would you do differently next time?
I'm proud of completing the challenge without using Figma file for exact css but still the final output looks similar.
What challenges did you encounter, and how did you overcome them?None.
@sirajshaonLooks good. Need to little work on font size and weight.
- P@mci3xWhat are you most proud of, and what would you do differently next time?
I'm proud of not giving up at this point.
Every time I managed to get something to work, some other thing got broken.
Recreating elements based on Figma is easy but to get it to be responsive and keep it to design, turned out to be very frustrating and very time consuming.
I feel like lines like these are a little step forward:
width: clamp(20.438rem, 87.2vw, 24rem); height: clamp(36.188rem, 63.65vh, 38.188rem); padding: clamp(var(--s-md), 6.4%, var(--s-lg));
Overall I'm not too happy with how it came out.
What challenges did you encounter, and how did you overcome them?This small project almost broke me down :|
I had a lot of problems with getting rid of media queries and at the same time keep it to design.
There is no top and bottom padding on mobile, on tablet padding is bigger and on all sides and no padding at all on desktop. At the end I had to use two media queries for that.
At first I wanted to use
<ul>
on links but I had issues with styling buttons and it was really annoying. Decided to userole="list"
instead.Wanted to go back to
<ul>
at some point when I discovered that at some particular screen sizes my buttons are overflowing and I didn't find the solution. I only addedoverflow: auto
so there is a way to scroll when it happensIt is killing me that on my
What specific areas of your project would you like help with?.list
elementgap
andjustify-content: space-between
is not working as I would expect and I don't know why. I wanted to get rid ofgap
so buttons would come closer when viewport height is lower but they just overflow.In case of some screen dimensions like 1280x800 my buttons are overflowing and I couldn't help it.
I wanted to use
clamp()
ongap
but I failed.I wanted to use
space-between
without agap
but it didn't work.Didn't want to shrink buttons because on design their height is fixed.
Tried
flex-shrink
also but without success.@sirajshaonGreat work. Try removing height property from class "card". I think, It will fix your scroll issue. Let me know. Thanks...
Marked as helpful - @Giriprasath1726@sirajshaon
add
html, body { height:100%;}
then add these inside body tag
body { display: flex; justify-content: center; align-items: center; flex-direction: column; }
this will make your design centered. and make sure to use the design responsive for all size using variable units instead of px. You can check my solutions
- @Franco-CipollaWhat are you most proud of, and what would you do differently next time?
Can someone please look at my website and code and tell me the solution to why my cards fly up a bit when i hover over the button? it happened since i put a border to my button when hovering
@sirajshaongive your button border inside button style and give border color --clr-grey. remove border and it's color from button:hover style. for more understanding, you can check my design..