I've noticed that when I view this layout on my computer, it appears very narrow and doesn't fully utilize the width of the screen. When I resize it to test responsiveness, the profile section becomes too narrow in tablet mode or isn't properly centered. Additionally, an error arises where the icon with the email and name input is no longer visible. The button placement should also be adjusted to align with the bottom of both cards.
My query is how can I modify this to achieve the desired outcome?
I am currently utilizing Bootstrap for this layout.
In the images provided, the black color signifies the edge of the screen.
Below is the code snippet:
Current Desktop version
Mobile version example Where the profile picture and name input are missing.
Desired Desktop-Version Layout Taking up more space on the screen and wider with margin spacing.
Tablet Version Concept The first part should be centrally aligned or have equal widths.
New Mobile Design
Sample HTML Code Below
<div class="body-container">
<div className="container">
...
<!-- Remaining HTML code omitted for brevity -->
CSS Styling
.body-container {
...
}
.account-settings .user-profile {
...
}
/* Additional CSS properties given below */
...