Click here to Skip to main content
15,558,034 members
Please Sign up or sign in to vote.
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
Updated 9-Nov-20 3:00am
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

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 %.
 
Share this answer
 
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.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900