I am making a user profile page for our group app, I want to know that how I can make the size of the picture and the size of the text shrink when I shrink the size of the browser.

below are the scss code for classes:

    .show-picture{
        width: 200px;
        height: 150px;
        border-radius: 10%;
        size-adjust:relative;
    }

    .Trip_info{
        width: 20%;
        height: 200px;
        float:left;
    }

    .Planner_page{
        width: 20%;
        height: 200px;
        margin-left:40%;

    }

    .Social{
        width: 20%;
        height: 200px;
        float: left;
    }

    .Setting{
        width: 20%;
        height: 200px;
        margin-left:40%;
    }


    .button{
        font-size: 2em;
        letter-spacing: 0px;
        margin-bottom: 30px;
        margin: 4px 2px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        color: grey;
  
    }

I tried to divided them into div of rows but the size will not shrink. And also I tried the width and height auto but that size will be very werid.

CodePudding user response：

        body{
            margin: 0;
            padding: 0;
            background-color: grey;
            text-align: center;
        }
        p{
            color: blue;
            font-size: 40px;
        }
        img{
            width: 300px;
            height: 300px;
        }


        /* media query breakpoints */

        @media screen and (max-width: 480px){
            body{
                background-color: lightblue;
            }
            p{
            color: red;
            font-size: 20px;
            }
            img{
                width: 150px;
                height: 150px;
            }
        }

<p>Dummy Text</p>
<img src="http://docllpdemo.com/asteroid/wp-content/uploads/2020/11/dummy-man.png" alt="dummy-man">

CodePudding user response：

use media query breakpoints for a responsive website