Member Avatar for Sam367

I'm having troubles with the site i'm creating, whenever i adjust the web page(ctrl + mouse wheel), all the elements were moving out of their places. I don't know and how do i fix this?

  • 2 Contributors
  • 7 Replies
  • 194 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Sam367

Dani AI

Generated

As pointed out, keeping related elements inside the same container is the right direction. A fixed-width wrapper will stop layout from reflowing under zoom, but a more flexible and robust approach is to (1) diagnose what’s actually leaving the normal flow and (2) use a layout method that keeps the logo and adjacent text tied together rather than positioned independently.

Quick diagnostic checklist:

  • Inspect the logo and text with DevTools (Elements → Computed) and look at position, left/top, transform, and margin.
  • Add a temporary visual outline to see boxes:
  • { outline: 1px solid rgba(0,0,0,0.06); }
  • If either item is position: absolute/fixed or a parent has a transform/zoom applied, that usually explains unexpected shifts.

Practical fix (keeps spacing stable while remaining flexible):

<header class="brand">
  <img class="logo" src="logo.png" alt="logo">
  <span class="name">mcdonalds</span>
</header>
.brand { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.logo  { display: block; width: 48px; height: auto; }
.name  { font-size: 1rem; }

Using flex with gap and white-space: nowrap keeps the two items glued together and avoids relying on a fragile margin-left that can be affected by wrapping, floats, or absolute positioning.

Additional tips: avoid absolute positioning for inline-level elements, use img { max-width:100%; height:auto; } if the logo can scale, and prefer rem for font-relative spacing when you want spacing to scale with text-size changes. If the problem still appears at certain zoom levels, create a minimal test case (only the logo and text) to isolate the offending CSS.

Recommended Answers

All 7 Replies

Member Avatar for zeroliken

A simple solution would be to place all the elements inside a division that has a fixed width

Member Avatar for Sam367

But what if i'm not comfortable with the fixed width and i want to change it a little? Little to my desired look?

Member Avatar for zeroliken

what I meant by fixed width is the width attribute of the division has a set value i.e. width:700px; which you can freely change or do you mean that it should have dynamic changes whenever the user zooms or scrolls?

Member Avatar for Sam367

No, it will not change or move out of their places when the user adjust, zoom, scroll or whatever you call it. Cause it's like this.. For example i have a logo and beside right of it is a text word "mcdonalds" that has a margin-left from the logo of 5px. Whenever i adjust the page, zooming out(ctrl + mouse wheel), the word is like moving out of its place like getting to nowhere. Like 500px wide from the logo.

Member Avatar for zeroliken

ok then same answer as before, put every element in a division
it'll look something like this

        <body>
            <div id = "main">
                <div id = "logo">...</div>
                <div id = "text">...</div>
                ...
            </div>
        <body>

where in its css the width of main is constant e.g. 900px

Member Avatar for Sam367

Nice! Thank you so much :)

Member Avatar for Sam367

Nice! Thank you so much :)

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.