Currently, I am in the process of developing a web application that needs to be responsive across various devices including mobiles, tablets, and PCs. My focus right now is on creating a user profile page that adapts well to different screen sizes. To achieve this, I have utilized a grid system to structure the page.
Here's a snippet of the code for reference: Computer
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" type="text/css" href="..\Styles\nav-navbar.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
...
<p>The challenge lies in optimizing the layout for smaller screen devices like smartphones and tablets. The current display does not meet my intended design. Here is a screenshot illustrating the issue:
<a href="https://i.sstatic.net/O0gO6.png" rel="nofollow noreferrer">android Device</a></p>
<p>I aim to center the tab panel on the screen, ensure the content is responsive, place the [Name Tag] below the profile picture, and center the image on the screen. Despite several attempts, including restructuring elements within the card using rows and the class <strong>justify-content-md-center</strong>, I have yet to achieve the desired result.</p>
<p>CSS File: <strong>(profile.css)</strong></p>
<pre><code>body{
/*background-image:url("images/2.png");*/
background-color:rgba(26, 26, 26, 0.3) !important;
background-repeat:repeat;
}
@font-face {
font-family: "hana";
src: url("../fonts/hana.ttf");
}
...