Standalone Banners and Contact Review

Our Comments

We wish use the following in the changes to be applied:

• The 4px grid convention
• Where h1 headings are the first item in the Standalone Banner we will have -8px top margin to counter the h1 line-height so that the line height isn't adding to the margin above the h1 text.

The following are corrections and improvements we suggest:

Correction 1
We need more width in the grey box area for wider headings. We suggest adding an additional 110 pixels to the grey box area.

.banner.banner--two-col .banner__image {
  -webkit-flex: 0 1 690px;
  -ms-flex: 0 1 690px;
  flex: 0 1 690px;
}

Correction 2
We want uniformed padding to the boxes containing text in both Standalone Banners.

.banner .banner__text-inner {
  padding: 40px;
}

Correction 3
The button should have no margin. The distance between the paragraph text and the button should be solely the bottom margin of the paragraph text

.banner .banner__text-inner .button {
  margin-top: 0;
}

Improvement 1
We wish to improve the consistency of margins following the heading and paragraph texts

.banner.banner--two-col .banner__text h1,
.banner.banner--two-col .banner__text h2,
.banner.banner--two-col .banner__text p,
.banner .banner__text h1,
.banner .banner__text-inner p {
  margin-bottom: 16px;
  margin-top: -8px;
}

Improvement 2 
Within the boxes in the Standalone Banners we would like no margin at the bottom of the last paragraph found in the box.

.banner.banner--two-col .banner__text p:last-child,
.banner .banner__text-inner p:last-child {
  margin-top: 0;
}

Improvement 3 
The full width of the contact banner will be the same as the other 3 Standalone Banners 

.contact {
    padding-top: 0px;
    background: #dddfe1;
}

Improvement 4 
The contact banner will be the same margin as the other 3 Standalone Banners. That is 40px

.contact .contact__address {
        padding: 40px;
        background: #eff0f1;
    }