All comments

• 

  Djacson Stvil•220

  @djacsonsSubmitted almost 2 years ago

  I was unsure of how to create the mobile view, I think I sort of got it right but some of the placements were off. Also, I couldn't get the correct font. Flexbox was also a problem for me. I kinda got it to work but I have to look at more examples.

  

  Product preview card

  1

  10
  

  Isaias Lopez•50

  @lpzisaiasPosted almost 2 years ago

  You did a good job despite the drawbacks you mention! Some recommendations:

  • It is good practice to start with mobile views first.
  • With flexbox, put in the body tag, min-height: 100vh; to center the elements.
  • To use Google fonts, go to the file link and first select the font and its weight, once selected (click on the "+" button to select) copy the generated code in the header of your html file, example:

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">
  

  And below it generates the css code to use: body{ font-family: 'Roboto', sans-serif; }

  • Finally You can try flex-direction: column and row for mobile and desktop view

  Marked as helpful

  0