HTML CSS FLEX/GRID

Community feedback

• 

  P

  Justin Green•2,770

  @jgreen721Posted about 2 years ago

  Looks like the link to your repository may be broken. Might just be on my end though. Anyways, a fairly easy solution to the rating-cards would be to assign a column div for the stars and a column div for the text-blurb and just use display:flex on the parent card .

  Something like

  .ratings-card{ display:flex; align-items:center; justify-content:space-between; }

  .column{ display:flex; align-items:center; justify-content:center; width:50%; }

  Width will keep the 2 sides proportioned and the flex/flex-attributes just an easy way to get a horizontal/centering of the children elements (the stars/ the text blurb). Certainly a-lot of playing around to your preferences after that but, as a basic set up it "should" work. lol

  Looks good though. The cards collapse and center nicely upon screen resizing. Nice work! 😎

  Marked as helpful

  0

  ---

  

  Angus Turnbull•70

  @echoturnbullPosted about 2 years ago

  @jgreen721 Thanks for taking the time to look at it and explain! Really appreciate it.

  1
• 

  Aatypic•490

  @AatypicPosted about 2 years ago

  Hello, just a quick help for grid

  Your <section class="container"> you applied:

  .container {
  ...
  grid-template-areas:
    "title review"
    "cards cards";
  }
  

  Meaning on this template you said you have 3 different items that are taking specific areas "title" taking one space " review" too, and "cards" taking 2 grids bottom. Therefore you need in your html, so inside .container 3 children to work, right now you have 8 children inside:

  -.heading and .description should be together in one.

  -.star-rating divs all together in one.

  -etc .. you get it ;)

  Now I really encourage you to learn more about semantic, you cannot only use <div> everywhere. And not every content needs to be wrapped in a <div> ;)

  Concerning your question about the stars. You could have them as a ::pseudo-element background-image, or you can make a list with 5 separate <li>'s each holding the svg inside. I've seen both work.

  I'm looking forward to see the end results ✌️ Good luck !

  Marked as helpful

  0

  ---

  

  Angus Turnbull•70

  @echoturnbullPosted about 2 years ago

  @Aatypic Hi! Thanks for the feedback! That's the second time I have been told to look at semantic html and not just put everything in a div.. I'll have to put some time aside to look into it properly.

  My idea with the Grid was to have multiple children in the grid squares and position them arouind the grid to achieve the layout. I couldn't think of a better way to do it. Going to spend some time looking at other peoples solutions before I try again.

  Cheers!

  0