HTML/CSS, element position affected by zoom

  • Context: HTML/CSS 
  • Thread starter Thread starter kolleamm
  • Start date Start date
  • Tags Tags
    Element Position Zoom
Join the discussion
Registration is free. Ask a follow-up in this thread, or start your own.
Sign up Log in
3 replies · 4K views
kolleamm
Messages
476
Reaction score
44
I'm trying to make a simple HTML page that has a few elements. The problem is that when I zoom in using the mouse wheel and holding down Ctrl everything starts to go all over the place and it just looks completely mixed.
I tried to find solutions to this but have had no luck so far.

I want my page to have a proper zoom in and zoom out just like www.sephora dot com , or any other well designed website.

I've tried code such as position:absolute / relative, % values, px values, but no luck.

Thanks in advance
 

Discussion

Physics news on Phys.org
Your position statements are the problem. If you want to use them you must first define an anchor point. Have a look at this little tutorial.

AM
 
  • Like
Likes   Reactions: kolleamm
That does seem to be on the right track. The only problem I still have is that the page always zooms into the top left corner of the page, not towards the middle of the parent element. Even on this page everything remains in the middle until the elements cannot fit into the page anymore, then it zooms in towards the top left.
 
Also my elements are still overlapping each other