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
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
vince
vince•17mo ago
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
roelof
roelof•17mo ago
@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
vince
vince•17mo ago
Yea my way is not responsive <350px I'd have to play around with it more
roelof
roelof•17mo ago
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
vince
vince•17mo ago
So it's easy to get it responsive problem is I'm having trouble making them both equal heights on mobile
roelof
roelof•17mo ago
Got the feeling I need to learn a lot before I can call myself a junior FE developer
vince
vince•17mo ago
Lol don't worry about it I'm struggling with it too a bit
roelof
roelof•17mo ago
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 ?
vince
vince•17mo ago
Yea your css was a bit bloated but that's okay Yea
roelof
roelof•17mo ago
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
roelof
roelof•17mo ago
there are not equal height to me
vince
vince•17mo ago
Oh was that not a part of the challenge? I just figured that's what the design would want
roelof
roelof•17mo ago
This was the design I got with the challenge , So i tried to get as close as possible with it
roelof
roelof•17mo ago
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
vince
vince•17mo ago
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
roelof
roelof•17mo ago
oke
vince
vince•17mo ago
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
roelof
roelof•17mo ago
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
vince
vince•17mo ago
You can use either, flex is probably better here, experimenting with getting flex to be responsive for all heights
roelof
roelof•17mo ago
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 ??
vince
vince•17mo ago
yes I mean it's pretty much done i just don't have the 50/50 responsiveness done
roelof
roelof•17mo ago
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
vince
vince•17mo ago
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
roelof
roelof•17mo ago
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
vince
vince•17mo ago
same here 🙂
roelof
roelof•17mo ago
but if I look at your code I did not do a bad job after 1 year learning GN and again thanks
vince
vince•17mo ago
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.
roelof
roelof•17mo ago
Thanks I will study it and hopefully learn from it another one sended me in a pm this feedback :
First you need to update the html.

1. The picture element should be mobile first
2. The stats should be an unordered list with 3 list items inside. No headings, that wouldn't make sense for numbers. Yoh can wrap the number/word in strong or span set to display block

Then in CSS I'm afraid you need significant changes here
- always use a modern css reset at the start of the styles
- font size must never ever be in px
- never use 100vw
- body
- there should be no explicit heights or widths in this (only a height 100% on the image on larger screens)
- the component only needs a max width
- on large screen only you can make the component a grid with 2 1fr columns or if a flex row the two children can be width 50%
First you need to update the html.

1. The picture element should be mobile first
2. The stats should be an unordered list with 3 list items inside. No headings, that wouldn't make sense for numbers. Yoh can wrap the number/word in strong or span set to display block

Then in CSS I'm afraid you need significant changes here
- always use a modern css reset at the start of the styles
- font size must never ever be in px
- never use 100vw
- body
- there should be no explicit heights or widths in this (only a height 100% on the image on larger screens)
- the component only needs a max width
- on large screen only you can make the component a grid with 2 1fr columns or if a flex row the two children can be width 50%
what do you think about that im still confused about point 2 why is should be a underordered list
CodeNascher
CodeNascher•17mo ago
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€
roelof
roelof•17mo ago
me too I use always this as reset
* {
margin: 0
padding: 0
box-sizing: border-box
* {
margin: 0
padding: 0
box-sizing: border-box
` and to em is told that is enough
vince
vince•17mo ago
I agree with the PM too
roelof
roelof•17mo ago
oke then the next few days trying to make it work and use your code as a example if I may
Want results from more Discord servers?
Add your server