Card component using a table and CSS.

Community feedback

• 

  Stefani Josifovska•270

  @stefani-josifovskaPosted over 2 years ago

  Hi, good job on the code so far! Setting the mobile version is fairly easy, it's done with something called a media query (you can check how to use it on w3schools or mdn), and basically you define the changes in the css code between the desktop and the mobile version there. Also, once you've seen how it all works, I would highly recommend going with the mobile-first approach in the next challenges, i.e. doing the mobile version first and then adding a media query for the desktop version. I know the bootcamps usually do it the other way around, but I would really recommend you also try mobile-first - usually the code gets smaller this way, and it also helps you watch out for the details on the smaller screen and then build up for the bigger screens. :)

  Marked as helpful

  1

  ---

  

  OVIDIU•10

  @oghioca2Posted over 2 years ago

  @stefani-josifovska thank you so much for the advice, i will look into that and try doing my next challenge how you said.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Ovidiu! Congratulations for the challenge!

  To apply make your website responsive in different screens, you need to apply media queries, for example, you create one media query and when the page reach a certain width the website will aply the changes your set. I'll give you one example below:

  @media (max-width:375px) { all info you put here inside will affect your page when it gets under width:375px

  .container {display: flex; flex-direction: row; background-color: blue; font-size: 24px, } }

  Under 375px the page will change the flex-direction, the background and the font. When you see the design files, you need to see how your page looks in the mobile version and put this changes inside the media query @media (max-width:375px) setting the max-width.

  I'll put you a link of a video that helped me to understand better the concept:

  • Learn media queries in 7min: https://www.youtube.com/watch?v=yU7jJ3NbPdA

  You can also take a look in the solution report panel to fix the accessibility issues and make your code concise and semantic@

  I hope it helps you!

  Marked as helpful

  0