Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Giulia• 210

    @GiuliaT97

    Submitted

    I didn't have any major difficulties, it was the first time I used grids successfully. I usually prefer to use flexbox. Any advice is welcome!

    Testimonials-grid Solution

    2

    Sicro01• 60

    @Sicro01

    Posted

    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!

    0
  • Jack• 10

    @JFrancis23

    Submitted

    Found it difficult to write neat and clean CSS! Always learning!

    • Tips for organising CSS sections?
    • Tips for specificity & structure ? ie, style as much as you can with one block then go more specific?

    Responsive CSS Cards - Plain CSS

    1

    Sicro01• 60

    @Sicro01

    Posted

    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

    0