Lägg till CSS för att anpassa sidan för olika skärmstorlekar

[garakangas]

För att sidan ska se bra ut och fungera för skärmar av olika storlekar behöver vi anpassa våran CSS. Detta går att göra rätt lätt "natively" med CSS. Se exempel nedan.

Från StackOverflow:

Media queries is a good choice for your problem.

You don't have to use different classes for these, just you have to define different behaviour based on resolution.

You can know the screen height and width by Javascript, but with CSS, I dont think that is possible. The best you can do with css is to define range of devices as in Mobiles, Tablets, Laptops, Really Large screen Devices and based on media queries you can define what a class do on certain type of device.

Have a look a below example:

/* For Mobile */
@media screen and (max-width: 540px) {
    .view {
        width: 400px;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .view {
        width: 600px;
    }
}

Actual dimensions can vary as per your case.

This is the same method many framework uses to implement responsiveness.

[garakangas]

Kan se om jag har tid att implementera ovan, men annars kan någon annan också få leka med det och sedan lägga till det.