WordPress – Problem with CSS on same resolution (1080p) but different displays (external monitor, laptop display) and zoom level

I sense there may be two issues disguised as one here:

1: Misunderstanding how CSS works / is supposed to work

To answer your question, it might be useful to reiterate that CSS is not a language. It does not do any actual rendering. It simply sets properties which influence how rendering takes place. On top of that, browsers are machines which place a strong focus on accessiblity.

Scaling Factors

The OS exposes functionality to users to allow them to specify the "apparent" size of a display versus the "actual" size – its resolution.
When a user says they’d like the display to scale to 125%, then they are actually indicating to apps that they should render everything bigger by 125%.

By the very definition of CSS, this should be completely out-of-scope for you as a CSS dev – it needs to be handled automatically. This is precisely the behaviour you are observing. CSS is simply doing as it’s told – the browser is telling CSS to think of all units as being 1.25 times bigger.

In fact, if you read the specification (MDN for simplicity) you’ll notice that a pixel actually has a predefined size – contra to what you might think if you had to guess. In actuality, this is completely unreliable because the browser also does calculations including the true pixel density of the display and this just becomes a mess. Point is, just because the element renders to be 1080 CSS pixels wide, does not mean the user’s display or even the browser window is that many pixels wide.

This is also evident by including this guy: <meta name="viewport" content="width=device-width, initial-scale=1" /> – the HTML Viewport tag. It instructs mobile browsers to recompute the pixel size, such that websites no longer interpret the device’s true screen width, (on my Samsung Galaxy s22, that’s 1080 true pixels) but CSS ends up seeing it as ~320px. Of course this changes depending on the site, but that just confirms my point – A CSS pixel does not correspond to a true pixel, specifically, so that OS display scaling factors are accounted for.

2: Your markup and CSS may be poorly structured

Buzzword time: Responsive design – The act of building webpages without fixation on pre-defined display sizes – The ability to adjust to any display size passively.

It seems to me that the fact your menu is breaking by having a changing screen size, is quite possibly a result of too many magic numbers. These are long-known as culprits of many un-dynamic webpages and cause bad renderings everywhere.

I cannot stress enough how important it is to build your layout on the assumption that a screen size can and will change. Both Chrome-derived browsers and Firefox-derivatives have a responsive design mode in their dev tools which you can use to test how the webpage reacts to display size changes.

CSS features I can highly recommend is using CSS grid and Flexboxes.

Effective CSSing using grids and flexboxes

Grids are stupidly powerful tools you can use to completely change your layout by setting a few properties. Using a media query, you can switch between different layout modes which behave differently depending on screen size. A general example of how I use them would be something like this: (I leave the actual implementation of this as an exercise to you)

1. I define a maximum page width. I like about 1000px.
2. Define two columns of equal size which add up to no more than the maximum width
3. The remaining space is filled by two equally-sized padding columns around the outside of the two centre columns
4. The header bar or menu in your case is also defined but as an automatically-sized row.
5. The centre region automatically grows downwards in the number of rows depending on how much content there is.
6. The footer takes up another row.

This is all achievable using only CSS grid. I also have recently started experimenting with CSS Subgrids which allow you to define your layouts in a more deeply-nested way.

Once you’ve done all this, you can name the various regions of your grid and assign the various elements of your page to them.

Using media queries, you can not only redefine the structure of your grid, ie the size of each column and row, but you can also relabel the various regions. Your elements will automatically lay themselves out to fit the new structure. You can actually define multiple media queries to refine the layout even further at even smaller display sizes, but I’ve never really had to do this.

When to use grids and flexboxes

I like this question because I quite dislike the "standard" text-flow layout. I use them everywhere. Modern browsers are so efficient that I have never encountered a performance issue because of an overuse of flexbox or grid. With a properly designed system, this is basically not an issue.

But when doing things like a homepage where you have various cards or menus etc, I find that it can sometimes get exhausting to define layouts for each page. This is where I like flexbox. Specifically the flex-wrap feature. Cards will automatically jump to the newline if they don’t fit and can be centre-aligned etc.

To summarise:

1. The menu behaviour you are seeing is a result of not accounting for changing screen sizes
2. Using a proper layout system will allow you to account for changing display and viewport sizes.

Without too much context into your question, more specific answers are hard to produce. I also deliberately kept my answer a bit broad because I hope it helps make better designs in the future. CSS is easy, HTML is easy, browsers are stupidly fast, life is good. But doing things well is … a challenge.

Good luck and happy webdev!