Footer issues

[thisisdano]

See https://designsystem.digital.gov/components/footer/

• We explicitly add a mobile-lg:grid-gap-0 to the contact info grid, but that seems to be a mistake.

---

• If utilities aren't set to use important usa-footer__contact-info.grid-row will be overridden CSS to display: inline-block — we need to constrain this behavior to the slim footer only.

---

• .usa-footer__logo-img needs an explicit width: 100%set

---

• Big footer open carets are too big after svg refresh...

---

• Big footer should be able to accept nav items that don't contain sub-items, just as the primary nav can be a combination of simple links and links that trigger menus.

---

• Use auto for default footer link spacing @desktop to improve horizontal spacing

[mejiaj]

If utilities aren't set to use important usa-footer__contact-info.grid-row will be overridden CSS to display: inline-block — we need to constrain this behavior to the slim footer only.

Just to confirm this means:

.usa-footer__contact-info {
    display: inline-block;
    line-height: 1.1;
}

Should be:

.usa-footer__contact-info {
 ... all current styles minus `display: inline-block;`
}

.usa-footer--slim .usa-footer__contact-info {
  display: inline-block;
}

---

.usa-footer__logo-img needs an explicit width: 100%set

What issue is this causing and where? I assume this is an IE11 issue?

[thisisdano]

It's not an IE 11 issue, rather an uncaught display mistake. For instance, if we look at the big footer, we see the contact info stacked (look in the bottom right...)

It should appear as two columns:

And yes, I think the fix is just as you indicate!

[thisisdano]

For reference, all these issues came up as I was updating the uswds-jekyll theme and applying it to a reference site.

[thisisdano]

Fixed in above PRs