Traditionally we set a breakpoints for mobile to be anything less than 480 pixels, and that worked. New phones are 414 pixels by 896 pixels, and I am having the problem of the menu switching from the off canvas menu to the regular menu when the phone is switched to landscape view. I want break points like the following.
/* iPhone 11 Pro Max Viewport – iPhone XS Max Viewport */
@media only screen and (min-width: 896px) and (orientation: landscape) {
/* Your Styles... */
}
@media only screen and (min-width: 414px) and (orientation: portrait) {
/* Your Styles... */
}
/* iPhone 11 Pro Viewport – iPhone X Viewport */
@media only screen and (min-width: 812px) and (orientation: landscape) {
/* Your Styles... */
}
@media only screen and (min-width: 375px) and (orientation: portrait)
{
/* Your Styles... */
}
This means that I need to alter the template, where would I go, what file(s) should I modify so that I can accommodate a mobile phone in both portrait and landscape view without affecting small tablets at the same time when landscape view on and iPhone Pro Max is 896 pixels more than the number of pixels for a small table in portrait view
Of course I want to target various sizes of tablets and notebooks as well. So I need to update the templates adaptive features; again what files should I be interested in?
I know how to do media queries, I need to update the logic when the template switches to the off-canvass menu. I want the off-canvass menu to be used in both portrait and landscape views on mobile phones, but I want the regular menu to be used on small tablets, so simple pixel breakpoints wont work, I need to break when both the minimum pixel width is encountered and the required orientation is encountered at the same time.
