fbpx

CSS: Media Queries for responsive layouts (Smartphone, Tablet, Desktop)

When you need to adjust some elements of your web design layouts to be suitable with various browser screen sizes, Media Query is coming to help. Here are the general types of code for your project:

GENERAL SMARTPHONES (PORTRAIT AND LANDSCAPE)

 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#yourstyle {background:#ffffff;}
}

 

IPAD (PORTRAIT AND LANDSCAPE)

 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#yourstyle {background:#ffffff;}
}

 

IPAD MINI (PORTRAIT AND LANDSCAPE)

 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#yourstyle {background:#ffffff;}
}

 

IPHONE 5 (PORTRAIT AND LANDSCAPE)

 

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
#yourstyle {background:#ffffff;}
}

 

FOR THE WEB BROWSER BETWEEN 600PX AND 900PX

 

@media screen and (min-width: 600px) and (max-width: 900px) {
#yourstyle {background:#ffffff;}
}

 

LARGE DESKTOPS

 

@media screen and (min-width : 1824px) {
#yourstyle {background:#ffffff;}
}

 

0
0

Darling Room explainer video

Our client come up with the order of the short video explaining their busines for use on the web and other media. We created the animations and comissioned the English, Finnish and Russian language voiceovers.

English version:

Finnish version:

Russian version:

 

Client: Darling Room.

0
0