I have a web-page for devices(smartphones/tablets). I have used media queries to make it responsive and have used rem units for all measurements. I have set default html/body font-size:62.5% and then calculated all other rem units. Also for each breakpoint i have a set of css.

But it seems that the font size and other element doesn't scale as the resolution increases. What should i do to make it good? or What else i am missing here?

  • 1
    You wouldn't normally want font sizes to change much if at all. That said, if you are using REM, that is related to the root font size. Are you changing the html/body font size with each breakpoint?
    – DA01
    May 18, 2014 at 5:59
  • i have changed the font-size of each break point..individually..as i am not changing everything..for all brakpoints May 18, 2014 at 6:59
  • i dont increase the root font but i do change fonts for different breakpoints May 18, 2014 at 7:20
  • How are you attempting to change the font sizes? I think you may want to ask this over on StackOverflow and provide some code samples for us to look at.
    – DA01
    May 18, 2014 at 7:29
  • But sometimes it requires only few elements to resize or align.. then on that cases how to handle.. any idea? May 19, 2014 at 5:48

1 Answer 1


Use width:100%; for the full screen / div in your web page and if you mean responsive use this code for ipad / phone

@media only screen and (max-width : 768px // for ipad

480 //for> phone){


And set this in your html file to read the responsive css

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

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.