@GiuliaT97
Latest solutions
Latest comments
- @Sicro01
Hi,
Looks good - only one suggestion....
If you view the site on a much larger screen size there is no constraint on the width of the cards. Not a big issue for this site but it you wanted to experiment you can achieve this by changing your "grid-template-columns" statement:
From: grid-template-columns: repeat(4, 1fr);
To: grid-template-columns: repeat(4, minmax(smallest size, largest size));
Replace the smallest/largest with whatever works; you can also adjust the repeat aspect if different column need different sizes. The "largest size" sets the max width of the column.
One further tip - you could set the sizes using a CSS variable, defined say in your root (as you've done with your font) and play around with the numbers there.
Good luck!
- @JFrancis23@Sicro01
Hi Jack - fairly new to CSS & JavaScript myself - hopefully this is useful.
For CSS tips and guidance I refer to Kevin Powell's content on YouTube (https://youtu.be/3Y03OSNw6zo). His way to organize his CSS is broadly as follows:
- /* root level vars / e.g. - --clr-bg-xx: / for coloring a background */
--wd-mobile:
--wd-desktop:
-
--fs-base:
-
--ff-base:
-
--fw-regular:
-
--fw-bold:
-
--fw-dark:
-
/* CSS Reset */
see CSS Reset from https://www.joshwcomeau.com/css/custom-css-reset/
-
/* Components */
-
/* Bespoke */
-
Structure within a class:
/* Section vars */
/* display */
/* positioning */
/* box model */
/* typography */
/* manipulation */
Re your 2nd question - again I'm in the early part of my journey! Kevin talks about:
- avoiding unnecessary CSS code e.g. adding width everywhere or height: auto as a couple of examples
- spotting where there is commonality across a number of classes and drawing them out to a common reusable class
I've tried to use Kevin's approach in my solution posted just after yours.
All the best with your future coding!
Marked as helpful
