10

Here is a screenshot (freehand red circle included) of the "API" list item misalignment when the @media screen and (max-width: 980px) media query kicks in for viewports of less than 980px width:

screenshot of the footer section with the "API" list item misaligned

The "API" and "Data" list items constitute a separate semantic group, however, they are considered to be a part of the "Stack Exchange Network" unordered list in the HTML markup with only visual separation (via the mt16 CSS class increasing margin-top for the first element which happens to be the "API" list item).

The above obviously leads to the "API" list item being pushed to the bottom. Moving the two list items to a <ul> and applying mt16 class to it would have prevented the issue from happening (content simplified for brevity):

<ul class="-list">
<!-- first group of list items -->
</ul>
<ul class="-list mt16">
  <li>API</li>
  <li>Data</li>
</ul>

screenshot of the fixed footer section

Improve this question
4
  • 2
    Seems our md:mt0 class is not taking effect. On it! Commented Apr 14, 2022 at 13:49
  • 1
    Looks like this has since been fixed. Commented Oct 23, 2022 at 17:31
  • @CaveJohnson looks like it has been indeed - I suppose the post will get a status-completed in the customary 6-8... Commented Nov 28, 2022 at 14:50
  • 2
    This question was just retagged as completed. Posting this comment so you're notified. Commented Oct 29, 2024 at 0:49

1 Answer 1

Reset to default
3

This bit of CSS also causes trouble in the normal view:

enter image description here

Where there is a white row between all the different elements. This might be intentional, but then this is the wrong fix for the "problem".

The right fix would be to apply a margin-bottom to the previous element in the list, as that doesn't offend the display when shrinking to different screen widths.

Using Margin bottom on "Business"

Full width:
enter image description here

Medium width:
enter image description here

Small width:
enter image description here

Improve this answer
1
  • 1
    I assume the separation is intentional. And yeah, another way to fix the alignment issue is to apply margin-bottom instead, agreed. Commented Apr 14, 2022 at 7:24

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.