QR-Code-Challenge with HTML and CSS only

Community feedback

• 

  Mirjax2000•680

  @Mirjax2000Posted 8 months ago

  Hi, you need to be responsive to many resolutions what people used to browse the internet. We have PC monitors, notebooks, tablets, phones, retina phones, even smart watches on your hand can run web.

  Responsivnes and dynamic resolution is big theme. First of all to answer your question is how to make breakpoint to tell the browser here on that resolutin i want my width of my card componet be 20% smaller.

  standart for that now are mediaqueries. @media only screen and (max-width: 780px) { .card {width:80%}};

  that is mean thet at resolution 779px element .card recieve new value width:80% so it will be smaller by 20% and also all his children which they have something to do with width, they will aslo shrink down.

  ok study mediaquerie to help you understant how to make page responsive.

  then we have also dynamic content and for that we use percentages and flexbox or grid layouts, and it will react dynamicly for your width and height automagicly. Here you dont need mediaqueries.

  But if something happen on some resolution your design will fail, you need mediaqueris to adjust it. and we call it breakpoints.

  i hope it helped you some bit.

  0
• 

  P

  Nur Farah Omar•120

  @NF0marPosted 8 months ago

  Everything look fine, I Learnt something from it.

  0