Skip to content
OverviewSolutions
3
Comments
2
Sicro01
@Sicro01

All comments

  • Giulia•210
    @GiuliaT97Submitted over 1 year ago

    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
    @Sicro01Posted over 1 year ago

    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
    @JFrancis23Submitted over 1 year ago

    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
    @Sicro01Posted over 1 year ago

    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