I’ve just confused myself here testing an iPad Mini which seems to be 768px. This was displaying desktop in older versions and now on an update is showing mobile i’ve noticed some styles were not correct so i’ve read dev docs and checked some demos online how they behaved and see what is supposed to be happening.
Dev docs states that “Breakpoints are used in the CSS code to set up the screen width at which the design switches from the mobile to the desktop version.” and that the mobile breakpoint in Luma and Blank are 768px “@screen__m: 768px (in the Blank and Luma themes, this breakpoint switches between mobile and desktop views)”
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/responsive-web-design/rwd_css.html
MagePlaza 2.4.5 Demo
This seems to break at 769? so mobile on an iPad Mini at 768px.
https://magento-demo.mageplaza.com/?_gl=1*6n3fs2*_gcl_au*MTAxNjY2NjA5MS4xNjg5MTYwNTYx
MageBit 2.4.? Demo
Not entirely sure here on the version but breaks at 768 so desktop on an Ipad at 768px.
https://magento2-demo.magebit.com/
Not sure really what the intention is here anymore but feel according to docs the iPad mini (or 768px devices) should be desktop so unsure which way to fix. Seeming to me more difficult to fix to be desktop than fix the slight changes to keep mobile at 768px but feel the latter is incorrect according to docs. Both the Blank and Luma themes however are mobile at 768px.
Is anyone else noticing inconsistencies here in the core code for this breakpoint?
e.g. styles-m.css:12081
@media only screen and (max-width: 768px)
.navigation, .breadcrumbs, .page-header .header.panel, .header.content, .footer.content, .page-main, .page-wrapper > .widget, .page-wrapper > .page-bottom, .block.category.event, .top-container {
padding-left: 15px;
padding-right: 15px;
}
Surely if “design switches from the mobile to the desktop version.” at “768px” the max width of mobile / tablet styles here should be 767px.