Responsive Layout - Media Queries

Question

When I adjust the screen size , the orange line which is defined by a h1 tag doesn't move downwards with the text and also my orange boxes that i had floated to the right merge behind the text.

I know I need to include Media Queries somehow but no idea how, can anyone help me?

Thanks!

Answer 1

Ok, first of all I don't think I have ever seen anyone use as many breaks <br> tags on a single page as you have haha.

The answer to your question is to simply use the <hr> tag (horizontal rule), wherever you want a line.

For example after the closing div tag for timings add the <hr> tag. By default the <hr> tag is styled black so we need to add some simple styling to your stylesheet.css

hr {
    border-top: 1px solid #bd6e22;
}

If you wanting to add spacing above, below or even both then add this to the styling.

hr {
    border-top: 1px solid #bd6e22;
    margin: 20px 0;
}

I have put 20px for an example but you can change that to what ever you want.

Hope this helps.