thewebsite123 / thewebsite123.github.io

Source code of The Website
http://thewebsite123.github.io
1 stars 1 forks source link

Responsive CSS #4

Open JohnWallis01 opened 9 years ago

JohnWallis01 commented 9 years ago

Make the website mobile responsive

This Code will be handy:

/* Smartphones (portrait and landscape) ----------- / @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { / Styles / } / Smartphones (landscape) ----------- / @media only screen and (min-width : 321px) { / Styles / } / Smartphones (portrait) ----------- / @media only screen and (max-width : 320px) { / Styles / } / iPads (portrait and landscape) ----------- / @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { / Styles / } / iPads (landscape) ----------- / @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { / Styles / } / iPads (portrait) ----------- / @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { / Styles / } / Desktops and laptops ----------- / @media only screen and (min-width : 1224px) { / Styles / } / Large screens ----------- / @media only screen and (min-width : 1824px) { / Styles / } / iPhone 4 ----------- / @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { / Styles */ }

JohnWallis01 commented 9 years ago

kind of done kind of not have the website the way it is on desktops and laptops and create a list for navigation and hide the disbar on mobile devices