Responsive product preview card made with CSS Flexbox

Community feedback

• 

  Phuong•290

  @pengpongpongPosted almost 2 years ago

  Hey Ele!

  I noticed you used in your index.html a lot of link tags for google fonts, but an easier way to import them is to use the import link from google. Select "@import" instead "<link>" when you're on google fonts webpage. Copy the import link, which should look something like this (I selected Inter font, with 400, 700 and 800 weight):

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap')
  

  Add the import code snippet on top of your style.css file and now you can use the font in your font-family like so: font-family: 'Inter' with font-weight 400, 700 or 800 as you wish.

  Your p tag with "P E R F U M E" is one way to solve that, but better would be to use letter-spacing in your CSS to space letters like so: letter-spacing: 2px.

  Also try to use section and main tag for a more semantic approach.

  The way you added svg is one way, but you can also use img tag like so: <img src="SVG LINK"/>. It's just a shorter way to implement svg.

  When using rem and em you should know that rem is basically 16px, because rem is related to the root font-size. When you're using em it is taking its font-size based on its parent (and if parent has no font-size, it will take the font-size from the next parent until it reaches the root, which will be 16px again). So when you change font-size and you have em somewhere in it's children, that will affect the children's size also. That's why you should change font-size first and then the other elements.

  To center things you can use flexbox or grid.

  display: grid
  place-content: center
  

  or

  display: flex
  justify-content: center
  align-items: center
  

  place-content is a shorthand property forjustify-content and align-content. justify is used for horizontal and align is used for vertical. justify-content and align-content moves the whole container and justify-items and align-items moves the items inside the container. Most of the time you will use justify-content with align-items when using flexbox or place-content when using grid. Flex-box, W3-schools grid, W3-schools [Justify-content, W3-schools]](https://www.w3schools.com/cssref/css3_pr_justify-content.php) [Align-items, W3-schools]](https://www.w3schools.com/cssref/css3_pr_align-items.php)

  To center with margin you can use: margin: 0 auto That will set margin-top + margin-bottom to 0 (you don't have to use 0) and margin-left +margin-right will be centered, because with auto it will use the remaining space equally on both side, which will center the element. Definitely use flex or grid to center.

  For bootstrap you can add link tag to your head tag in your index.html file. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> . You can also use script tag. Add the script tag to your body right before the closing </body> tag. That is to ensure that your html is fully loaded before your script tags will be executed.

  bootstrap links, documentation

  0