hide-on-mobile class breakpoint issue

[swashbuck]

Subject of the issue

The .hide-on-mobile class allows you to hide a component for mobile views. The problem is that it's not properly aligned with the layout breakpoints. This can cause a component with .hide-on-mobile to disappear at the @device-width-medium breakpoint.

hide-on-mobile
src/theme/adapt-contrib-vanilla/less/project/theme-common.less

Steps to reproduce

1. Add a single-width Graphic and Text component to the same block.
2. For the Graphic component, add the hide-on-mobile class.
3. View the page exactly at the medium breakpoint (720px width by default).

Expected behaviour

Graphic component should still be visible since 720px is "medium" and higher.

Actual behaviour

• Text component correctly becomes 50% width.
• Graphic component is incorrectly hidden. Graphic component reappears at 721px and higher.

Solution

I think the breakpoint should be adjusted by 1px (0.0625rem).

.hide-on-mobile {
  @media (max-width: (@device-width-medium - 0.0625rem)) {
    display: none;
  }
}

[guywillis]

Perhaps there is an alternative solution that doesn't require adding a tiny rem number to the media query.

Would tying the style into the size class that appears on the HTML work? Something like:

.size-small .hide-on-mobile {
  display: none;
}

The size-small class in active from 0 through to 719

Alternatively we could amend the class:

.hide-on-mobile {
  display: none;

  @media (min-width: @device-width-medium) {
    display: block;
  }
}

[swashbuck]

Would tying the style into the size class that appears on the HTML work?

@guywillis I like this idea and I think it's the simplest fix.

The other suggestion you made runs into the issue of elements sometimes needing to be display: flex instead of display: block. So, the class would need to be modified in that case.

[github-actions]

🎉 This issue has been resolved in version 9.15.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀