Can I improve here something to make it more reponsive the good way
Hello,
A long time ago I wrote this css (https://github.com/RoelofWobben/stats-card/blob/main/roelof.css)
But I wonder now im doing the CLR course what to improve to make the css better
But I wonder now im doing the CLR course what to improve to make the css better
GitHub
stats-card/roelof.css at main · RoelofWobben/stats-card
my solution to the stats-card challenge of frontend mentor - stats-card/roelof.css at main · RoelofWobben/stats-card
33 Replies
https://codepen.io/vince1444/pen/NWEbEbY
Definitely room for improvement on my version too; I couldn't get flex-wrap to work properly on
main
so I switched to grid and used a media query@vince thanks
I think it can always be improved
I did not like the image part but it seems that I need 2 css parts to make it work
Yea my way is not responsive <350px
I'd have to play around with it more
NP
I was thinking myself to get rid of the height and convert all px to rem or em
im going to all my very old challeges of front end mentor to improve them on responsive part
So it's easy to get it responsive problem is I'm having trouble making them both equal heights on mobile
Got the feeling I need to learn a lot before I can call myself a junior FE developer
Lol don't worry about it I'm struggling with it too a bit
Things I think im can be better at is responsive and accessbility part
the rest I think I m familair with
sometimes I think I use very much css that I do not need
you mean the two parts do not have the same height on mobile ?
Yea your css was a bit bloated but that's okay
Yea
if I look at this : https://github.com/RoelofWobben/stats-card/blob/main/design/mobile-design.jpg
GitHub
stats-card/design/mobile-design.jpg at main · RoelofWobben/stats-card
my solution to the stats-card challenge of frontend mentor - stats-card/design/mobile-design.jpg at main · RoelofWobben/stats-card
there are not equal height to me
Oh was that not a part of the challenge?
I just figured that's what the design would want
This was the design I got with the challenge , So i tried to get as close as possible with it
and this was the design on desktop : https://github.com/RoelofWobben/stats-card/blob/main/design/desktop-design.jpg
GitHub
stats-card/design/desktop-design.jpg at main · RoelofWobben/stats-c...
my solution to the stats-card challenge of frontend mentor - stats-card/design/desktop-design.jpg at main · RoelofWobben/stats-card
Well I'm gonna just try to make them both equal heights because I feel like in the real world that's what you'd probably want
oke
For now you can still look through it I've made a lot of changes in your html and css
I literally copy and pasted what you had in github and then pasted it over to codepen and rewrote it
I hope I can see what you changed then
A lot of changes, you changed it to a grid I see
I use then flexbox because I did not learn grid
You can use either, flex is probably better here, experimenting with getting flex to be responsive for all heights
that would be awesome
I did it then only for 375px and 1440px because that is what the challenge asked
But I would like to learn how it looks well on all heights and widths
That is why I do the CLR course
@vince still working on the parts ??
yes
I mean
it's pretty much done i just don't have the 50/50 responsiveness done
if its look like the images I shown you im happy
I will check it tommorow because it is almost time to sleep
Thank you very much and I hope i learn things I can use for the other one to make it better
and maybe one time im ready for a FE job
Don't worry you'll get there. I consider myself ready for a full time job and I'm struggling with this 50/50 thing as well 😅 one problem doesn't define you
I mean learn and understand things like responsive more
not one problem defines me
it defines me how I react on a problem
and im a person who likes to things well
I ike to provide good work
same here 🙂
but if I look at your code I did not do a bad job after 1 year learning
GN and again thanks
Did it finally
I made it more complicated than I had to (go figure). I was trying to make it without media queries (sorry b1) so I ditched that idea. Went with grid because you can easily leverage same height/width sections with the
fr
unit. grid-template-rows: repeat(2, 1fr)
means there will be a grid with 2 rows, where each row is equal height. Instead of limiting the height, I just limited the width that the card could be on mobile so the card isn't huge.Thanks
I will study it and hopefully learn from it
another one sended me in a pm this feedback :
what do you think about that
im still confused about point 2 why is should be a underordered list
because it's a list of stats that could be in any order technically.
personally, i have to agree with the pm you quoted, except for the reset maybe (no idea what they had in mind specifically).
just my 0.02€
me too
I use always this as reset
`
and to em is told that is enough
I agree with the PM too
oke then the next few days trying to make it work
and use your code as a example if I may