Template talk:Tech header/layout

Latest comment: 10 months ago by Tacsipacsi in topic aligning

aligning edit

Hello all, will it be better to make the tab size the same and align the text to the center of the tab? see Template:Tech header/sandbox/styles.css. --Minorax«¦talk¦» 03:43, 29 July 2023 (UTC)Reply

On QHD and 4K screens, maybe (or at least not worse). On smaller screens, your design is definitely worse than the current one:
  • As soon as one tab doesn’t fit in one line and contains a line break, its horizontal line is no longer at the same vertical position as those of the other tabs.
  • On even narrower screens, it may happen that both the tabs contain line breaks, and they are broken in two lines themselves. This looks bad; lines should be broken either within or between tabs, not at both places.
  • On even narrower screens, the @media rule kicks in, and there’s only one tab per line – but that’s still narrow, hardly any word fits in one line, let alone whole tab texts.
  • When words don’t fit in one line, they’re broken at arbitrary positions rather than where they should be hyphenated.
  • Not only do narrow-screen scenarios look worse, they also get more common: using the current design, the tabs fit in one line on viewports not narrower than ~1520px; using your design, even a 2050px-wide viewport causes a line break. This means that users with common screen resolutions 1600×900px, 1920×1080px and 2048×1152 would start to see line breaks.
Tacsipacsi (talk) 00:08, 31 July 2023 (UTC)Reply
Return to "Tech header/layout" page.