3

The Votes cast statistic "{ } this week" in the Summary tab is not aligned properly in the full site on mobile:

enter image description here

On PC/desktop, it's correctly aligned:

enter image description here

I also tried landscape view, but the issue still persists.

This occurs on Chrome for Android.

Expected result:

enter image description here

Improve this question
4
  • 1
    There is a media query @media (max-width: 980px) that completely screws everything up
    – Oleg Valter is with Ukraine
    May 6 at 16:12
  • 1
    Previously reported in this post
    – bad_coder
    May 6 at 19:01
  • @bad_coder: That specific bug you reported occurs on PC/desktop, where zooming in affects the alignment (at 100% it's correctly aligned; at 175% and above, the alignment is off). In the full site on mobile, this issue occurs regardless of the zoom level.
    – Justin
    May 7 at 5:11
  • @Justin that wasn't using zoom but the responsiveness, meaning resizing the display area. In principle being responsive the CSS should be exactly the same across devices. Like Oleg says, the formatting depends only on width.
    – bad_coder
    May 7 at 5:17

1 Answer 1

Reset to default
3

The items in the "Votes cast" summary are laid out using the Flexbox model. The container element consists of two rows of items ("upvotes", "downvotes", "question votes", "answer votes" and "this month", "this week", "today" in the second respectively), each its own flex container (set with the d-flex Stacks class).

To ensure proper column alignment, each row has the flex__allitems3 Stacks class set on it that sets the flex-basis CSS property to calc(25% - var(--su16)); for all items (indicated via the flex--item Stacks class) which sets the initial width of items roughly equal to ¼th of the width of the container.

This is enough for the elements to be aligned properly (as evidenced by the alignment on larger screens). However, each row also has the md:jc-space-between Stacks class which is the source of the issue. The jc-space-between Stacks class simply applies the justify-content: space-between; rule to the flex container, and the md: prefix makes it scoped to medium-sized screens or less.

And wherein lies the problem — the abovementioned class adds a media query with two problematic rulesets that kicks in for viewport widths less than 980px:

@media (max-width: 980px) {
  html.html__responsive:not(.html__unpinned-leftnav) .md\:jc-space-between {
    justify-content: space-between !important;
  }

  html.html__responsive:not(.html__unpinned-leftnav) .md\:fl-auto {
    flex: 1 1 auto !important;
  }
}

Of note is the shorthand flex CSS property and it its third value which ensures that the flex-basis is overridden to auto. Combined with flex-grow set to 1 and justify-content also being overridden to space-between, the media query causes the items to stretch resulting in what you observe.

Case in point, compare the component with the query disabled and without.

With:

component with the query disabled

Without:

component without the query disabled

Give it 6 to 8.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .