Trying to make Profile pic and text responsive-CodePudding

I am trying to make my profile pic and About me text responsive, I am using bootstrap v5, I am using percentages to get some sort of responsive for the profile pic, is there a better way to make the profile pic responsive for phone, tablet and a screen of 1080p. I am currently designing for mobile-first and then will do some adjustments for other resolutions.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Sheldon's Online Portfolio</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="mystyle.css" rel="stylesheet">
  </head>
  <body>
    <div class = "navbar navbar-default navbar-fixed-top">
      <nav class = navlist>

        </span>
      </nav>
    </div>

      <div class = "container">
        <div class = "profile-pic">
          <img src= "Images used/Profile Pic.png"  alt = "No Image"/>
        </div>
          <img src= "Images used/photo-1542831371-29b0f74f9713.jpeg"  alt = "No Image"/>

          <div class = "container-sm">
            <h1>About Me</h1>
            <div class = "container-sm-t">
            <p></p>
          </div>
      </div>



  </body>
</html>

CSS

.navbar
{
  background-color: #2A3956;
  box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
  border: 1px solid #02d3f6;
}

.navbar-default
{
  border:0;
}

.container
{
  padding: 0px;
  margin: 0px;
}
.img-fluid
{
  border: 1px solid #02d3f6;
  max-width: 100%;
  height: auto;
}

.container-sm
{
 background-color: #2A3956;
 box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
 border: 1px solid #02d3f6;
 min-height: 340px;
}

.profile-pic
{
  position: absolute;
  margin-left: 32%;
  margin-top: 54%;
  margin-right: auto;
  margin-bottom: auto;
}

.img-thumbnail
{

  border: 1px solid #02d3f6;
  max-width: 50%;
  border-radius: 100px;

}
.container-sm h1
{
  color:#07DD45;
  margin-top: 21%;
  font-size:25px;
  margin-left: 30%;
}

.container-sm-txt p
{
  color:#07DD45;
  font-size:15px;
}

Is there a better way to achieve the outcome I am looking for?

CodePudding user response：

You can use media queries in CSS. According to me, media queries are the best way to handle responsiveness.

If you don't know how to use media queries, check this video: https://www.youtube.com/watch?v=yU7jJ3NbPdA

It will for sure help you solve the problem :)