Skip to content
OverviewSolutions
8
Comments
3
Tokelo
@Kennedy-was-taken

All comments

  • Tokelo•150
    @Kennedy-was-takenPosted 9 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•150
    @Kennedy-was-takenPosted 9 months ago

    @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
  • Tokelo•150
    @Kennedy-was-takenPosted 9 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