Seeking advice on making my profile picture and About me text responsive, utilizing Bootstrap v5 with percentages for responsiveness. Wondering if there is a more efficient way to ensure the profile picture looks good on phones, tablets, and 1080p screens. Currently focusing on mobile-first design with plans to adjust 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" class="img-thumbnail" alt = "No Image"/>
</div>
<img src= "Images used/photo-1542831371-29b0f74f9713.jpeg" class="img-fluid" 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;
}
Open to suggestions on improving the current approach for achieving desired results.