Closed martinkasa closed 5 years ago
Thanks for the issue! I moved this to our ionic-docs
repository as the code looks fine but the documentation needs to be updated. 🙂
IMHO I would think the code is wrong, because I think the main usage would be if screen below breakpoint show button A if not, show button B. This way it becomes more clear if you just change the {dir} part.
Closing this as we're reworking the CSS to where the down
will use the current breakpoint's minimum width here: https://github.com/ionic-team/ionic/pull/18601
for me this is still not working (having ionic version 4.11.10), when applying the ion-hide-sm-down css class i expect the element to be hidden under 576px like stated here: https://ionicframework.com/docs/layout/css-utilities#ionic-breakpoints
but it uses the md breakpoint pixels which is wrong...
this is the wrong css generated: @media (max-width: 767px) .ion-hide-sm-down { display: none !important; }
@nickwinger This has been added for Ionic 5 since it can be considered a breaking API change, you can see this blog on our release candidate if you'd like to try it out early: https://ionicframework.com/blog/ionic-5-0-0-release-candidate/
media query not work on safari / ios virtual device (big sur)
Bug Report
Ionic version:
[x] 4.2.0
Current behavior: Currently generated CSS:
Either documentation is wrong or generated CSS. For example in docs is written:
.ion-hide-sm-{dir} | Applies the modifier to the element when min-width: 576px (up) or max-width: 576px (down). But mediaquery for .ion-hide-sm-down is @media (max-width: 767px).
Expected behavior: .ion-hide-sm-down should be @media (max-width: 575px).
Steps to reproduce: Just check generated CSS in whatever ionic v4 app.
Ionic info: