I am new to UX and IA and everything about interface and solution design. I need to do a simple image gallery based on grids. I read about responsive design and media queries.

Ok, in wide screen i have 7 columns grid, in laptop 5 columns, in tablet 3 and in smarthpone 1. This is pretty cool. I have done this with fluid layouts, using percentage for the width property. And I like this solution because it is flexible to all viewport size.

But what about if a user change font size with "command +" or "command -" keys? If image width are with percentage the container size does not change, and images does not change either. The result is a little bit weird: everything is getting smaller but images does not changes (well, the margin changes, that is even weirder).

But if I use em for width I obtain a no more fluid layout.

How mix the two layouts?

  • 2
    While I love the question, I think it is not a UX question as much as a "how do I accomplish x" with responsive design.
    – JohnGB
    Dec 27, 2012 at 11:50
  • also if you post on stackoverflow it's best to have some coding samples that you have tried on your own
    – DJ KRAZE
    Dec 27, 2012 at 17:23

2 Answers 2


The question can sit in both places. Your not asking the right question. What you should ask yourself is "am I designing for a problem that really doesn't exist?" What I mean by that is. Yes, a user can re-size in a browser. There is a way through code to stop a user from doing that as well. But, before you go through the effort find data to back up what your asking. Just because a user can doesn't mean there is a large enough percentage that does to warrant the fix. There's a rule of 80/20 or 90/10 etc. Are you trying to solve the problem for the 20/10 or the others?


Don't use pixels in CSS! If you set font-size in body node to 100%, and everywhere else you use em (that is a ratio to the current font-size) instead of px, it's not a problem anymore if they change the font sizes in the browser. When the font size increases everything else will change.

So if you want to use 12px (font-size or anything else), and the default font-size is 18px on that "level", use 0.6666667em to set the size (0.666667 is 12/18).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.