Défi QR code

@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

@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.