flexbox, pseudo element, media queries

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi kIdKib, welcome to Frontend Mentor, and you did a good job here with your very first challenge!

  Firstly, to answer your question, it's preferred to use relative units such as rem or em (I normally use rem), as these allow the browser to make adjustments based on the parent font size in the case of em and the root font size in the case of rem.

  About the responsiveness, you can try using flexbox's flex property for the children containers, and I would also use max-width instead of width. Try adding these lines in your desktop view:

  .theBody{
     max-width: 45em;
     // rest of your code
  }
  
  .imageDesk {
      flex: 1 0 50%;
  }
  .imageDesk img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  .txt {
      flex: 1 1 50%;
      padding: 1.5rem 2rem;
      // remove width
  }
  // remove all the .txt rules for the other media queries
  

  Some other things I suggest:

  1. Try having clearer names for your container, such as "card" or "card-container" instead of "theBody"

  2. For CSS classes, it's best to use the kebab case (e.g., "image-desk") instead of camel case ("imageDesk"), which is normally reserved for Javascript. The classes are still readable, but it's just for the sake conventions and separation of concerns.

  3. Try having the font placed at the top of the CSS sheet instead of the bottom. Also, the Fraunces font is not appearing in the other media queries. (On that note, for this challenge, there isn't really a need to use that many media queries!)

  4. You have quite a number of issues listed in your report, such as the need for landmarks. To fix this one, simply change <div id="truc"> to <main id="truc"> and <div class="attribution"> to <footer class="attribution">. Be sure to look through the HTML ones and see how to fix them!

  One thing I suggest is, before moving on to the next challenge, try this challenge again but with a mobile-first approach. You really only need just one media query, and using so many here can be a bit messy and confusing, and more importantly, it can cause unwanted mistakes.

  In any case, this was really a great start, and there are lots to learn, so keep going!

  1