How to keep an image from moving on different screen sizes using position absolute?

Question

1.00/5 (1 vote)

See more:

https://jacobrishe.github.io/ Here is my website and you will see when you open it my picture might move depending on the screen size in which you open it. How do I keep my image from moving? Here is my code below.

.model {

position: absolute;

height: 70%;

bottom: 15%;

left: 60%;

transform: translateX(-70%);

}

u/media only screen and (min-width : 1824px) {

.model {

height: 65%;

bottom: 30%;

left: 55%;

}

}

u/media screen and (max-width: 1250px) {

.model {

height: 500px;

bottom: 100px;

left: 65%;

transform: translateX(-80%);

padding-bottom: 100px;

}

}

What I have tried:

I have changed the position from absolute to relative but it messes up the positioning of my picture and words.

Posted 27-Oct-20 10:24am

Member 14976864

Updated 9-Nov-20 2:00am

Add a Solution

Comments

Anurag Gandhi 27-Oct-20 16:33pm

Try position: fixed;

Member 14976864 5-Nov-20 4:26am

Thank you for answering Anurag! However, when I move the position to fixed, the picture moves down as I scroll down.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2020-11-09T02:02:00

Solution 1

The main problem you have is the "absolute" only really makes sense if you give absolute value for the location.

You are using % - which by definition is relative, in all but when of your style blocks.

position:fixed is only useful if you want the element to stay right where it is, even if the screen scrolls - very possible since you're handling multiple screen sizes.

You need to decide if your want to put them in absolute screen positions or keep squeezing them into relative postions with %.

Posted 9-Nov-20 2:02am

W∴ Balboos, GHB

Comments

W∴ Balboos, GHB 11-Nov-20 7:03am

My stuff, at work, is mostly absolute or semi-absolute. The latter, div elements that that contain internal components that are absolute and it's location . . . depends. This came about, initially, because the workplace was split between FireFox and IE7 (at first) - now it's just FireFox but in order for me to pages work I turned to absolute positioning - and got quite used to it.

Since all my pages are born from php, I have the convenience of making pages that can calculate spacing/positions so everything always fits.

You don't have to declare your positioning type for every element. Now I do realize that % is very tempting. I've found certain other style don't seem to work without a real value. I live in px land but some new ones exist that I really should look into.

There's no simple answer: I just found https://web.dev/min-max-clamp/ and it would seem to be able act as an alternative to the media styles, each with different values. Some places give "best practices" - I say - you're own experience and way of thinking will create your own practices. I love tables - and don't give a crap that they want you to use div's, instead.

You've got to play around with this stuff until you develop your instincts (really knowledge that just flows).

Last thing: for this or any Q&A: if you get your answer mark it 'accepted' so it doesn't keep getting attention.