Introduction
On devices with an non-standard mobile resolution and on retina devices with high-resolution screens, you may notice the normal view of your site appears or the tablet mode appears. Unlike mobile apps which specifically detect devices, CSS media queries detect the screen size. The theme may only provide responsive modes up to 1024px wide (an iPad in landscape mode)
On devices with a resolution of 768×1280, for example, the mobile mode may only appear in portrait mode, but the desktop mode loads in landscape. This is because 1280 pixels wide is considered a desktop width, so no responsive styling is being applied.
The Solution
We do not recommend changing the media queries to support anything higher than 1024 as this can limit the viewing experience for visitors of your site on legitimate desktop/laptop browsers and screens.
To check your media queries to ensure they can go up to 1024:
- Go to > and click responsive.css in the right sidebar.
- On the left, you will see code similar to this at the top. Ensure you are looking at the iPad @media line:
/*---------------*/ /* iPad and down */ @media only screen and (max-width: 768px){ - Change 768 to 1024. If it already says 1024 then they are already optimal.
