The two column layout is working on the contact page but it will not switch in line when I reduce the screen size?

Hey Dominic.

As Daniel says is easiest when we can look at the code. But based on the question I will try to give you some ideas to solve the problem.

when you reduce the screen size the two columns have align problems? if this is the situation this can be solve using this simple css code:

.col {
vertical-align: top;
}

The class "col" has to be in the two columns <div> This code align the columns to the top of the parent container

When you reduce the screen size the two columns do not switch into a single column? if this is the situation you need to check the media queries structure and conditions, make sure looks something like this:

@media (min-width: 600px) {

.col {
float: left;
width: 50%;
}

}

The class "col" has to be in the two columns <div>

I hope this can help you, if you have any doubt fell free to ask.

I think you have answered the question already!

My code was not contained in the media query and I did not use the col class- because this was not in the tutorial.

Thank you very much

I have one issue where my h1 on the header is not aligning left with the h2- please let me know if you can see an issue and if there's a good way to format:

https://w.trhou.se/ducj79b1i0

Hey Dominic,

I took a look at your site and found two issues that are causing the alignment problems.

In order to fix the h1 alignment problem, just remove the text-align: center from the h1 rule, then update your margin rule to margin: 20px 0;. This will push the left side of your h1 flush with the h2.

This is what your h1 rule in your main.css would look like after the changes are applied:

h1 {
  font-family: 'Archivo Narrow', sans-serif;
  margin: 20px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 1.2em;
}

A second issue that they don't have you correct in the course is how the h2 seems to be a little closer to the left side of the screen than the h1 in the large screen layout, which is simply due to the h1 having a larger font size than the h2. If you want to fix this, just add 1 or 2 pixels to the left padding of the h2 element in your responsive.css file. If you did this, your h2 rule in your responsive.css would look like this:

h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
    padding-left: 1px;
  }

This fix won't affect your small screen layout since it is applied to the media query. The small screen layout doesn't require any changes past what has already been done here.

The site looks great so far, good luck with the rest of the development!