How can I scale the positioning of my images to not cover my bio on different resolutions?

Question

Here's some example code from my page: I used "absolute" positioning to have the images scroll with my page and not create large gaps in my "About Me" section's text, with those specific px positions arising due to me having a 1440p monitor. However, I've recently been told that on other resolutions, 1080p for example, those images actually end up covering my page's body, due to the images moving to fit the smaller resolution. Is there any way to prevent that, while keeping the positions they already have, and not creating gaps in my About Me? I've already tried using percentages and changing "left" or "top" to "margin-left" or "margin-top" for example, but it all seemed to still not scale properly with lower resolutions. Any help is appreciated, thanks all.

Answer

Using @media you can set different CSS for smaller screen resolutions (I just input random values for the positioning). On Firefox you can do ctrl+shift+m to simulate different resolutions but I'm not sure about other browsers. Something similar will help a lot when testing and getting a suitable position for small screens

@media screen and (max-width:1920px) and (min-width:801px){

#pigeonpokemoncard{top:5px; left:5px}

}

^ that would be for 1080p

@media screen and (max-width:800px){

#pigeonpokemoncard{top:5px; left:5px}

}

Then for mobile

It's a bit complicated but unfortunately I'm not sure how you would directly scale the images without it

Permalink Report Reply

Answer

I think the best way to "scale the positioning" of your images is probably using vw instead of px. ViewWidth is based on the screen / device size versus set Pixel amounts (which do not adjust for device size).

I'm thinking I have the lower resolution size as your margin pictures do hover over some of your main content when I view your page.

I wouldn't change the top #'s but the left #'s may do better with a #vw.

A way to prevent that ? you may want to have your images scale with the screen size instead of adjusting the positioning. The above suggestion of having the images closer to the left margin (left: 5px;) is also a great idea to try before adjusting the images' sizes.

All of those percentages, margin-left and margin-top is definitely going to have "fun" results as the page scales with a device.

Hope this helps ^_^

Permalink Report Reply

Answer

Thanks for the advice you both.

I ended up doing something really janky, but it *kind of* works, the page is viewable on pretty much every standard resolution now, though the images can end up looking a little too small or spaced out. Don't know if there's anything I can do about that.

Here's the code I ended up with after a few hours of trial and error, in case anyone else ever needs it as a template. Admittedly though the code is likely very dirty, I was just throwing things at the wall after a while.

<div style="position:absolute; top:5px; left:20%; transform:translateX(-100%); z-index:99; display: flex; flex-wrap: wrap; justify-content: space-evenly; max-width: 50%; margin: 0 auto;">
<img id="pigeonpokemoncard" src="https://files.catbox.moe/ui0b7q.png" title="Pokemon HeartGold" style="width:16vw; max-width:360px; min-width:260px; height:auto; display:block; text-align: center;height: 30%; flex: 1; margin: 0 auto;padding: 1.5em 1em;"/>
</div>

« Web, HTML, Tech Forum

How can I scale the positioning of my images to not cover my bio on different resolutions?

Posted by Milli

3 Replies

Reply by vogel

Reply by OxeeCleen

Reply by Milli