Blog-preview-card

Community feedback

• 

  joacomenda•170

  @joacomendaPosted 8 months ago

  So em is a unit that is used to re-size text taking into account the font size of the parent element, so ,if you have a p element inside a div, if you set the div element to have a font size of 20px and the p element to have a font size of 1em, then in the browser, the p element will have a font size of 20px, if the p element has a font-size of 2 em, then the browser will put its font-size to 40px. It scales depending of the parent.

  If you have lot of elements inside of a same div and they differ in font size, but you want to keep the same ratio of font-size. You can use em on the children, but if you have multiple parent divs with childs, it may not look consistent.

  The better alternative is to use rem units, which calculates its font-size using the root element, which in almost all cases is the html element.

  Remember, that the font size of the root element is 16px, unless you change it.

  Marked as helpful

  0
• 

  BT738844•680

  @BT453567Posted 8 months ago

  Hello Henry

  Good job.

  There is currently an issue where if you go to preview site, the image overflows the border.

  I have looked at your code and noticed this:

  .wrapper .imgContainer { padding-block: 0 1.25rem; img{ width: 100%; border-radius: 10px; /* margin-bottom: 10px; */ } }

  This has not applied to the image, therefore I would suggest adding this to your css file:

  .wrapper .imgContainer img { width: 100%; border-radius: 10px; }

  That will correct the problem and the image will remain within the margins.

  Regards

  0

  ---

  

  Henry•40

  @stan545Posted 8 months ago

  Thank you so much @BT453567. I will work on that ASAP.

  Does it mean nesting rules doesn't always work?

  Because I nested the img {...} rule within the parent container's rule .wrapper .imgContainer {...} .

  0

  

  BT738844•680

  @BT453567Posted 8 months ago

  Hello Henry. I do not believe nested statements work in CSS, you need to create a new statement to target the img @stan545

  0

  

  BT738844•680

  @BT453567Posted 8 months ago

  Hello, I have realised that my browser does not support nested CSS statements. I did not realise that CSS nested statements had been introduced. Around 70% of users have support for nested CSS statements I believe. Regards @BT453567

  Marked as helpful

  1

  

  Henry•40

  @stan545Posted 8 months ago

  Thanks, @BT453567. I guess I have to stick to defining a new statement to target the img like you said, since it's supported in all browsers...

  Thanks again @BT453567, for your response.

  Please can you help me recheck with your browser to see if it is fixed.

  0

  

  BT738844•680

  @BT453567Posted 8 months ago

  Yes it seems fine now @stan545

  Marked as helpful

  0