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

1
  • 2
    Seems our md:mt0 class is not taking effect. On it! Apr 14 at 13:49

1 Answer 1

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

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

You must log in to answer this question.

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