Blog | hotsnow - Part 2
Hotsnow design agency. We are creative graphic design studio, branding agency and web design in Finland. Contact us to ask the offer now!
hotsnow, design studio, web design studio, design agency, graphic design, web design, product design, 3d design, 3d visualisation, branding, logo, nettisivut, 3d visualisointi, graafinen suunnittelu, graafisen suunnittelun toimisto, landing pages, ilme, дизайн-студия, дизайн, веб дизайн, логотипы, 3д,
18972
blog,paged,paged-2,ajax_fade,page_not_loaded,,select-child-theme-ver-2.5.1461673404,select-theme-ver-3.7,vertical_menu_enabled,wpb-js-composer js-comp-ver-5.0.1,vc_responsive

hotsnow

We're quite the bloggers

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;}
}