Left alignment of elements (padding)

[keelanfh]

On certain content types, particularly News Article, the left alignment of the header and body text looks a bit odd to me - not sure if intentional.

Personally I'd have thought it looks better to have the h1 in all cases aligned to the breadcrumbs at the top, for consistency. I think this occurs where padding is applied on a few different elements - for example, in news, we have:

<div class="lgd-row">
 <div class="lgd-row__two-thirds"> // 8px margin
  <div class="padding-horizontal"> // 16px padding
// ... 
   <div class="lgd-container padding-horizontal"> // 16px padding
    <div class="lgd-row">
      <div class="lgd-row__two-thirds"> // 8px margin

so by the time we get to the text, we have a total of 48px padding added. The breadcrumbs have just 16px added.

It's less obvious in other content types, but for example in the Service Landing Page, I think this would look better if the teasers weren't indented in.

[markconroy]

Hi @keelanfh

Thanks for this report. I'm aware of it, and it's tricky to solve just now while we are supporting IE11, and needing to use flexbox with some negative margin trickery, which adds the 8px beside each .lgd-row__item, (coupled with the many places that padding-horizontal can be added).

I did some playing around this morning writing the grid system using CSS grid and that solved a number of these issues. Nested padding isn't solved, but maybe we'll figure that out as part of the grid refactor. We just need to stop our explicit support for IE11 to use Grid.

Rest assured, it's one of those "in the brain" items and we'll get to it as soon as we can.

[keelanfh]

No worries @markconroy - useful to have the explanation on that!

I'm not sure that Essex have an explicit view on IE11 support, but a quick look at analytics over the last 30 days shows <0.002% of our users using IE - 5 visitors out of 293,000.

[markconroy]

Honestly, I don't think anyone would notice if we stopped supporting it. And it would make life easier for other parts of the frontend, and reduce the theme files by about 33%.

[markconroy]

This might get some traction: #349