Défi QR code

Community feedback

• 

  Tokelo•170

  @Kennedy-was-takenPosted 10 months ago

  @Nicolas-Guerin888

  Definitely. lets make use of a simple div tag.

  html :

  <div><div/>

  Css:

  div{

  height : 50px

  width : 100px

  }

  now we have a simple div shape that will be in a form of a rectangle. The plan here is to change the size of the shape and make it a square when the screen size reaches a certain amount.

  Css:

  @media (min-width: 480px){

  div{

  width : 50px

  }

  here it basically means that once the screen reaches 480px or is greater than 480px. change the width of the div to 50%. There isn't a need to specify the height here because we want the height to remain the same so it will use the previously predefine height of that div, thus giving us a square shape.

  as you reduce the screen below 480px, it will show a rectangle again.

  you can also check out this website. I mainly use this one when I want to check out or try new tags or functions:

  link : https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  Marked as helpful

  0
• 

  Tokelo•170

  @Kennedy-was-takenPosted 10 months ago

  @Nicolas-Guerin888

  hi Nicola

  good job on the solution. I noticed you didn't make use of @media to resize your solution to adapt to different screen sizes. Try making use of @media and it will give you a new perspective when designing for different screen sizes.

  Marked as helpful

  0

  ---

  

  Nicolas-Guerin888•80

  @Nicolas-Guerin888Posted 10 months ago

  @Kennedy-was-taken Merci beaucoup pour ton commentaire. J'ai des difficultés avec @media. Si tu peux, pourrais-tu me proposer une solution simple ?

  0