Mark Mark - 4 months ago 7
CSS Question

How to fix the size of an element across devices

I want an element which is of a fixed size from the perspective of reality - say 6 x 3 cm - for whoever is viewing it. So I've set it to 400 X 200 px - and then change my layout around this element (single column display for smaller displays etc.)

This works fine when I change the size of my desktop browser - the element appears the same, but the layout changes - but when I open dev tools and simulate mobile devices, the element appears far smaller.

Is there any easy way to fix the (real world) size of the element across devices?

I'm really stuck on this (I'm sure very simple) point, so any help would be much appreciated!

For example:

This is what I'm talking about

Answer

EDIT / CHANGED ANSWER (after seeing the image you added):

As a first step, put this into the <head>tag of your HTML code:

<meta name="viewport" content="width=device-width, initial-scale=1">

The page will not be zoomed down to the size of the viewport (i.e. mobile screen) anymore if you add that.

Then read about how to use media queries...