HTML/CSS, element position affected by zoom

  • Context: HTML/CSS 
  • Thread starter Thread starter kolleamm
  • Start date Start date
  • Tags Tags
    Element Position Zoom
Click For Summary

Discussion Overview

The discussion revolves around issues related to HTML and CSS, specifically how element positioning is affected by zooming in and out on a webpage. Participants are exploring solutions to maintain proper layout during zoom operations.

Discussion Character

  • Technical explanation
  • Debate/contested

Main Points Raised

  • One participant describes a problem with elements moving unexpectedly when zooming in on a webpage and expresses a desire for a consistent zoom experience similar to well-designed websites.
  • Another participant suggests that the use of position statements requires defining an anchor point to avoid layout issues.
  • A later reply notes that the zooming behavior defaults to the top left corner instead of the center of the parent element, indicating a potential issue with how zoom is implemented.
  • Another participant mentions that elements are still overlapping each other, suggesting further layout problems that need to be addressed.

Areas of Agreement / Disagreement

Participants have not reached a consensus on the best approach to resolve the zoom-related layout issues, and multiple competing views and solutions are presented.

Contextual Notes

Limitations include potential missing assumptions about the CSS properties being used, the need for specific definitions of anchor points, and unresolved issues regarding element overlap during zoom.

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
 
Technology 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
 

Similar threads

HTML/CSS Background-position CSS confusion with percentage values?
  • · Replies 9 ·
Replies
9
Views
3K
HTML/CSS What is the role of z-index in CSS positioning?
  • · Replies 10 ·
Replies
10
Views
2K
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
  • · Replies 5 ·
Replies
5
Views
3K
HTML/CSS Container shrinks at certain screen widths (CSS)
  • · Replies 5 ·
Replies
5
Views
3K
HTML/CSS Why does the img ID not work in this CSS code?
  • · Replies 8 ·
Replies
8
Views
2K
HTML/CSS Html5 <canvas> element related apps not working
  • · Replies 3 ·
Replies
3
Views
2K
JavaScript Need insert of mathcode in Table element
  • · Replies 13 ·
Replies
13
Views
2K
HTML/CSS HTML/CSS: Placing DIVs Next to Each Other
  • · Replies 6 ·
Replies
6
Views
3K
HTML/CSS Is There a Way to Indent Tables in XHTML?
  • · Replies 3 ·
Replies
3
Views
3K
PHP Solving PHP Issue with FireBellyLawnCare.com CMS
  • · Replies 15 ·
Replies
15
Views
7K