Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

HTML/CSS, element position affected by zoom

  1. Dec 31, 2016 #1
    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
  2. jcsd
  3. Dec 31, 2016 #2

    Andrew Mason

    User Avatar
    Science Advisor
    Homework Helper

    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.

  4. Dec 31, 2016 #3
    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.
  5. Dec 31, 2016 #4
    Also my elements are still overlapping each other
Share this great discussion with others via Reddit, Google+, Twitter, or Facebook

Have something to add?
Draft saved Draft deleted