HTML/CSS, element position affected by zoom

  • Thread starter kolleamm
  • Start date
  • #1
387
35

Main Question or Discussion Point

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
 

Answers and Replies

  • #2
Andrew Mason
Science Advisor
Homework Helper
7,613
357
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 kolleamm
  • #3
387
35
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.
 
  • #4
387
35
Also my elements are still overlapping each other
 

Related Threads on HTML/CSS, element position affected by zoom

  • Last Post
Replies
17
Views
671
  • Last Post
Replies
11
Views
2K
  • Last Post
Replies
3
Views
59K
  • Last Post
Replies
19
Views
953
  • Last Post
Replies
9
Views
729
Replies
4
Views
894
Replies
1
Views
2K
  • Last Post
Replies
8
Views
647
  • Last Post
Replies
2
Views
990
  • Last Post
Replies
18
Views
964
Top