Question

I am new to rails, and I have finished making my first web application. I am now looking at styling my app. I realise that I need to think about how my app will look on different devices, but don’t really know how, or the best way to go about this. Is there a way where I can have a standard look no matter what device the page is rendered on?

I started moving objects around to suit how it would look on a laptop, but looking at the page on a tablet, some things stay where they should, but others disappear off the edge of the page and basically mess up the style I had (which I think had something to do with using absolute positioning). I think I just want their device to look a page that is set in stone, where the user has to zoom in and out on their device, rather than optimise the page for their device.

Any help at all will be hugely appreciated. Thanks

Answer 1

You may want to use CSS media queries to optimize / change CSS rules according to your screen width/height. These are just usual CSS files which are applied by the client’s browser, so you don’t have to mess around with them on your side.

Here’s an example:

@media all and (max-width: 430px) and (min-width: 360px) {
  /* put your mobile css in here */
}