Positioning an entire site using em units vs px?

My thoughts are that for a modern responsive issues only em units should be used but I may be incorrect?

Generally speaking, you should use em, rem or percentage for layout.

There are occasions when the use of pixels is still appropriate within that structure - for example, when sizing an image.

1 Like

If you are talking about font-size then you should avoid pixel sizes but instead use rem, em or %. I prefer rem these days rather than e as it avoids compounding issues.

If you are sizing containers then there is no straight answer because it all depends on what you are doing. I tend to use a max-width approach and I set that max-width in pixels because I make sure my content is fluid inside and I don’t want sites that just get wider and wider when someone zooms. (However an em/rem approach is fine as long as you still control the max-width.)

Avoid fixed with px sizes on your containers as that means you have to use ‘adaptive’ techniques rather than a fluid approach (adaptive basically means a set series of media query breakpoints that change the width of your container depending on the viewport width). I prefer a max-width and then let content get smaller automatically by coding fluid elements. It requires less media queries and caters for more devices automatically.

If you use em for width then remember em is based on the parent font-size so in different contexts it will mean different things. Many users try to use em margins and then can’t understand why there are different margins all over the page.

For beginners and intermediate users just keep things simple and practice, practice, practice…

1 Like

Thank you.

1 Like