3 ms·

The OP is talking about things like media queries that only look at screen width and imply other things like input method from that. IIRC SquareSpace does exac

The OP is talking about things like media queries that only look at screen width and imply other things like input method from that. IIRC SquareSpace does exactly what they're saying: on desktop sites will have a horizontal list of links but on mobile it's a hamburger icon that takes over the entire viewport when clicked. Functionality exists to target pointer type and things like that in media queries, it's just very rarely used.

johnnyworker 3y ago
Ohhh, I had no idea! Thank you. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin... coarse - The primary input mechanism includes a pointing device of limited accuracy such as a finger on a touchscreen. fine - The primary input mechanism includes an accurate pointing device, such as a mouse. This solves everything! What I really want is having more padding on mobile, that's it. I prefer things to be compact otherwise, and it seemed hard to square that circle... with the pointer media query it's so trivial. Gotta love how every time you don't watch CSS like a hawk, it spawns 500 new features. Thanks again.
- withinboredom 3y ago
  I'm actually surprised this isn't a selector in tailwind css.
  - pests 3y ago
    That is one of the issues trying to re-implement every css property:value pair with a class name inherent in Tailwind.
crazygringo 3y ago
But that's what you want, no? I just visited SquareSpace and their homepage seems to work as I'd want. When my viewport is narrow enough that there isn't space for the horizontal navbar at the top, it switches to hamburger menu. Surely this is better than cutting off the navbar and half the page content in the middle vertically, and requiring the user to scroll horizontally?
- afavour 3y ago
  The hamburger menu could just be a vertical drop down stack rather than something that takes over the entire screen. The point is that the viewport-covering menu is huge because it’s designed to accommodate touch (i.e. imprecise) interaction. It could be much smaller when the user is using a mouse. But you rarely see such accommodation being made. The assumption is low width = mobile = touch.
  - crazygringo 3y ago
    I still don't get it. The actual menu items you select are 20 px font size in the hamburger menu, and 18 px font size from the navbar menu. That's just 11% larger. Nothing about that is "huge". The hamburger menu taking over the whole (narrow) screen doesn't bother me at all. If I'm using the menu, it's not like I need to be looking at the rest of the screen. And it just feels silly to create a third design. We already have navbar for widescreen and hamburger menu for narrow screen. Now you want a third version -- a hamburger menu that is pop-up rather than fullscreen -- for narrow desktop usage? I sure wouldn't want to do all that extra work.

johnnyworker 3y ago

Ohhh, I had no idea! Thank you. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin... coarse - The primary input mechanism includes a pointing device of limited accuracy such as a finger on a touchscreen. fine - The primary input mechanism includes an accurate pointing device, such as a mouse. This solves everything! What I really want is having more padding on mobile, that's it. I prefer things to be compact otherwise, and it seemed hard to square that circle... with the pointer media query it's so trivial. Gotta love how every time you don't watch CSS like a hawk, it spawns 500 new features. Thanks again.

withinboredom 3y ago
I'm actually surprised this isn't a selector in tailwind css.
- pests 3y ago
  That is one of the issues trying to re-implement every css property:value pair with a class name inherent in Tailwind.

crazygringo 3y ago

But that's what you want, no? I just visited SquareSpace and their homepage seems to work as I'd want. When my viewport is narrow enough that there isn't space for the horizontal navbar at the top, it switches to hamburger menu. Surely this is better than cutting off the navbar and half the page content in the middle vertically, and requiring the user to scroll horizontally?

afavour 3y ago
The hamburger menu could just be a vertical drop down stack rather than something that takes over the entire screen. The point is that the viewport-covering menu is huge because it’s designed to accommodate touch (i.e. imprecise) interaction. It could be much smaller when the user is using a mouse. But you rarely see such accommodation being made. The assumption is low width = mobile = touch.
- crazygringo 3y ago
  I still don't get it. The actual menu items you select are 20 px font size in the hamburger menu, and 18 px font size from the navbar menu. That's just 11% larger. Nothing about that is "huge". The hamburger menu taking over the whole (narrow) screen doesn't bother me at all. If I'm using the menu, it's not like I need to be looking at the rest of the screen. And it just feels silly to create a third design. We already have navbar for widescreen and hamburger menu for narrow screen. Now you want a third version -- a hamburger menu that is pop-up rather than fullscreen -- for narrow desktop usage? I sure wouldn't want to do all that extra work.