Flexbox, media query, ids, classes

Community feedback

• 

  Vaibhav Shete•150

  @vaibhavbshete

  Posted almost 3 years ago

  This is a very nice attempt!

  • I believe the font needs to change for the line-through text, in all aspects: font-size, colour, family and weight - according to the design. Still, if you want to use the same font-family, make sure you select the required weights on the google fonts page. The link should look like this:

  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100;9..144,700&display=swap" rel="stylesheet">
  

  Notice the 100 part. In your code only the 700 part is seen. Google is not serving the lighter font to your page because your page is not specifically requesting it. While we are on this topic, you can add both the google fonts in the same link tag. On google fonts, add weights of both the fonts one by one and then the generated link will include all the selected fonts.

  Other suggestions:

  • improve the break-point. Open it in a desktop browser and use the responsive design mode or manually resize the window. Add a break point around where the content starts overflowing.
  • Even on mobile version, don't assume fixed width. Set max-width:100% on the card so that it never gets bigger than the screen. Make content flow accordingly. Assume that the two designs are samples, and not just two fixed screen sizes.
  • Try thinking of margins and paddings in these terms: Does the wrapper limit the boundaries of the content? Then it should be padding on the wrapper. Does the content itself want to distance itself from the edges/ other content? Then it should be margin on the content. e.g. The right panel should offer a padding to its content on left and right. Then the content can occupy the available width using width: 100% and still look as expected. Even the button needs to be full width inside that container - as per the design. Then the extra work of adding negative margins might not be required.
  • Remember: You often do not need to stray away from the given colours and font-family. The designers usually have considered all the small and big items and included all the needed colours in the style guide. You need to figure out which is which.

  03

  Marked as helpful