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
 

FAQ: HTML/CSS, element position affected by zoom

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.

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.

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.

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.

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

HTML/CSS Background-position CSS confusion with percentage values?
Replies
9
Views
2K
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
Replies
5
Views
486
HTML/CSS Container shrinks at certain screen widths (CSS)
Replies
5
Views
592
HTML/CSS Html5 <canvas> element related apps not working
Replies
3
Views
2K
JavaScript Need insert of mathcode in Table element
Replies
13
Views
1K
HTML/CSS HTML/CSS: Placing DIVs Next to Each Other
Replies
6
Views
2K
HTML/CSS Is There a Way to Indent Tables in XHTML?
Replies
3
Views
3K
PHP Solving PHP Issue with FireBellyLawnCare.com CMS
Replies
15
Views
6K
PHP Preventing SQL Injection in PHP Forms
Replies
4
Views
6K
WaveGrid - Non-equilibrium Emergence Sandbox
Replies
1
Views
2K

Hot Threads

Recent Insights

Back
Top