Member Avatar for george61

I'm working on an entertainment site and there is some design mistake which I made. But everything looks good if zoomed out in 83% on chrome and 75% on mozilla and IE. What is the solution to resize everything or there is another way?

  • 3 Contributors
  • 2 Replies
  • 119 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Kraai

Dani AI

Generated

This thread shows a layout that only "looks right" when the browser is zoomed out (for example, 83% in Chrome or 75% in Firefox/IE). Relying on zoom hides the real problem. Zoom is not a cross-browser or accessibility solution. As asked, the exact mistake hasn't been shown, and as suggested, a small reproducible test case will make diagnosis much faster.

Common root causes to check quickly: a missing or quirks DOCTYPE, a fixed-width container or table wider than the viewport, oversized images or media, negative margins/absolute positioning that push width, or a stray transform/zoom rule. A fast way to find offenders is to open DevTools at 100% and scan for elements wider than the viewport with a console check such as [].forEach.call(document.getElementsByTagName('*'), function(el){ if (el.offsetWidth > document.documentElement.clientWidth) console.log(el, el.offsetWidth); });

Practical fixes that work reliably: convert rigid pixel widths to fluid widths or add max-width on containers and media; make images responsive with img { max-width: 100%; height: auto; }; apply * { box-sizing: border-box; } to simplify sizing; and prefer flexbox/grid layouts instead of nested fixed boxes. Avoid using the nonstandard CSS zoom as a "fix." Ensure the page is tested at 100% and with responsive breakpoints rather than relying on browser zoom.

For useful troubleshooting information in replies, include a minimal reproducible example: the trimmed HTML/CSS (with DOCTYPE), a screenshot at 100% and the zoom level that appears to "fix" it, and the browser(s) and versions tested. With those, responders can point to the specific rule causing overflow instead of suggesting blind workarounds.

Recommended Answers

All 2 Replies

Member Avatar for dlannetts

Whats the design mistake?

Member Avatar for Kraai

If you made a "design mistake" you should be able to correct it again where you made the mistake?

Please post the mistake, or your code in order to help you solve the problem properly.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.