HTML/CSS, element position affected by zoom

In summary, the person is having trouble with the positioning of elements on an HTML page when zooming in, and has tried various solutions without success. They want the page to zoom in and out like well-designed websites such as sephora.com. They have found a tutorial that may help, but are still having issues with the page zooming into the top left corner and overlapping elements in the middle.
  • #1
kolleamm
477
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
 
Technology news on Phys.org
  • #2
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
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
Also my elements are still overlapping each other
 

Related to HTML/CSS, element position affected by zoom

1. How does zooming affect the position of elements in HTML/CSS?

Zooming can affect the position of elements in HTML/CSS in two ways. First, if the page is zoomed in, the elements will appear larger and take up more space on the page. This may cause elements to overlap or shift out of their intended position. Second, if the page is zoomed out, the elements will appear smaller and may create gaps or white space between them.

2. Why does the position of elements change when I zoom in or out?

The position of elements changes when you zoom in or out because the zoom function adjusts the scale of the entire page, including the elements. This means that the size and placement of the elements will also be affected, resulting in a change in their position.

3. How can I prevent elements from moving when I zoom in or out?

To prevent elements from moving when you zoom in or out, you can use relative units such as percentages or em instead of fixed units like pixels. This will allow the elements to scale accordingly with the page, maintaining their position relative to other elements.

4. Can I use media queries to control the position of elements when zoomed in or out?

Yes, media queries can be used to adjust the position of elements when zoomed in or out. By setting different CSS rules for different screen sizes, you can ensure that the elements are displayed in the desired position regardless of the zoom level.

5. Is there a way to disable zooming on my webpage to prevent element positioning issues?

Yes, you can disable zooming on your webpage by setting the "user-scalable" property to "no" in the viewport meta tag. However, this is not recommended as it can prevent users from adjusting the zoom to their preference and can cause accessibility issues.

Similar threads

Background-position CSS confusion with percentage values?
    • Programming and Computer Science
Replies
9
Views
2K
JavaScript Need insert of mathcode in Table element
    • Programming and Computer Science
Replies
13
Views
1K
Html5 <canvas> element related apps not working
    • Computing and Technology
Replies
3
Views
2K
I Request for Input: 2D Minkowski Spacetime Diagram Generator
    • Special and General Relativity
Replies
6
Views
1K
WaveGrid - Non-equilibrium Emergence Sandbox
    • Programming and Computer Science
Replies
1
Views
1K
PHP Solving PHP Issue with FireBellyLawnCare.com CMS
    • Programming and Computer Science
Replies
15
Views
6K
HTML/CSS: Placing DIVs Next to Each Other
    • Computing and Technology
Replies
6
Views
2K
Comp Sci Implementing a PriorityQueue w/ a Doubly-Linked List (Java)
    • Engineering and Comp Sci Homework Help
Replies
2
Views
3K
Requesting suggestions for languages, libraries, and architectures for parallel (and sometimes non parallel) numerical and scientific computations
    • Programming and Computer Science
Replies
8
Views
2K
PHP Preventing SQL Injection in PHP Forms
    • Programming and Computer Science
Replies
4
Views
6K

Hot Threads

Recent Insights

Back
Top