Open JohnWallis01 opened 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 */ }
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
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 */ }