I'm facing a peculiar issue with my HTML/CSS while working on a profile page for a game with a focus on mobile responsiveness. The right-margin seems to persist even though I've tried various solutions. In portrait mode, everything appears fine but in landscape mode, the excessive width causes a scrollbar to appear.
HTML:
<div class="userProfile" style="display:none">
<div class="profileTop">
<div class="profilePicture">
<img src="somepicture.png"></img>
</div>
<div class="profileName"></div>
</div>
</div>
CSS:
.profileTop {
position: relative;
top: 10%;
left: 15%;
width: 70%;
height: 12%;
margin: 0;
}
.profilePicture {
display: inline-block;
width: 12vw;
}
.profilePicture img {
width: 100%;
height: auto;
vertical-align: top;
}
.profileName {
display: inline-block;
position: relative;
font-family:Stencil;
font-size: 1.3em ;
font-weight: lighter;
color: white;
left: 20%;
top: 35%;
}
It's strange that adjusting the width of the "profileTop" class only seems to increase the right margin, maintaining the same overall width. Any suggestions on how to solve this?
https://i.sstatic.net/IYS8E.png
UPDATE: I managed to find a temporary fix by decreasing the width of "userProfile", but the original issue persists.
UPDATE 2: The margin issue extends to the "userProfile" div as well. It appears that the "profileTop" div is inheriting properties from its parent, even though I've explicitly set the margin. The parent of "userProfile" is the body element.