0

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.

Improve this question

1 Answer 1

Reset to default
1

A change was made in Magento 2.4.4 (a year ago) that increase the max width for the mobile view to 768px from 767px in earlier versions. You can check the related commit: https://github.com/magento/magento2/commit/04012ba8e939377c626fb853e75794e093173a68

If you want to revert this change, you can revert the change from the above commit.

Mageplaza demo using Magento 2.4.5-p1: the max width for the mobile view is 768px.
Magebit demo using Magento 2.4.3: the max width for the mobile view is 767px.

Improve this answer
7
  • Thanks, is quite a large change is this definately intentional?
    – harri
    Jul 12 at 15:07
  • Seems to be a commit relating to page builder, surely there should be some kind of discussion about moving the whole desktop mobile breakpoint goal posts here. It doesn't line up with all other web design best practise that the tablet view now starts a pixel later than rest of my theme / bootstrap etc
    – harri
    Jul 12 at 15:23
  • As you can see from the commit, there is an internal ticket (ACP2E-169) for the internal team, which I do not have access to this resource. However, the commit message indicated the page builder image for the mobile view issue (perhaps it relates to github.com/magento/magento2/issues/34551 issue).
    – Tu Van
    Jul 12 at 16:01
  • In the release notes for version 2.4.4, there is some related info: "View breakpoints are now consistent across Magento Open Source." and "Images added using Page Builder are no longer duplicated on the storefront when displayed with a browser window width of 768px. Previously, with this browser window width, the application Open Source duplicated images on the storefront by displaying both the mobile and desktop version of images.". You can check it here experienceleague.adobe.com/docs/commerce-operations/release/…
    – Tu Van
    Jul 12 at 16:01
  • Yea still don't seem right, what do you actually think? In my opinion this is wrong we should be "Small Desktop/Tablet" here for 768-1023 in my opinion I've fixed my store now but surely we shouldn't have to.
    – harri
    Jul 12 at 17:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.