Nicolas-Guerin888• 80
@Nicolas-Guerin888
Submitted
Tokelo
@Kennedy-was-taken
All comments
- Tokelo• 130
@Kennedy-was-taken
Posted
@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 - PNarawit Tubtimtoe• 10
@narawit-tub
Submitted
Tokelo• 130@Kennedy-was-taken
Posted
@narawit-tub
hi Narawit-tub
good job on the solution, my advise is that its best you leave behind inline styles and go with external style where you can keep all your css styles in one separate file rather than combining both html and css under one file. making them separates makes it readable and promotes maintainability.
Marked as helpful
0 - Nicolas-Guerin888• 80
@Nicolas-Guerin888
Submitted
Tokelo• 130@Kennedy-was-taken
Posted
@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
