There is a difference in screen width on any tablet between portrait and landscape mode.
This can create issues in responsive website design. You might think your website should be PHONE compatible and it should and will be when you work with the stern responsive website design team, but we take it one step further and ensure that your website responds to tablet configurations as well.
Here is a bit of the CSS code behind our responsive website.
/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
header nav ul.menu li, header nav ul.menu li a, footer nav ul.menu li, footer nav ul.menu li a {font-weight:normal !important;
font-size:12px !important;}
/* Styles */
}
/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
header nav ul.menu li, header nav ul.menu li a, footer nav ul.menu li, footer nav ul.menu li a {font-weight:normal !important;
font-size:10px !important;}
/* Styles */
}
The first part defines the minimum and maximum width for the tablet. The second part are the COMMANDS which execute when the conditions are correct.
So, what does this do?
If you are looking at our site on your iPad right now, tilt your screen between Portrait and Landscape and you will see our menu changes SIZE.
We did this because our menu viewed in portrait mode was too BIG to fit, so the responsive css media queries above change the size of the font in our menu.
The !important code is there to make sure this command overrides any other commands that style our menu.
We would love to talk to you about responsive website design and how to future proof your brand online.