CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Emma Britnor
Emma Britnor

Reputation: 23

Responsive Layout - Media Queries

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!

Upvotes: 1

Views: 372

Answers (2)

Jordan
Jordan

Reputation: 1121

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.

Upvotes: 3

vimes1984
vimes1984

Reputation: 1693

Ok you need to open up http://me14evb.leedsnewmedia.net/slate/stylesheet.css in a ftp client. then https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ use the @media quieres for each page break size and adjust the style's accoridng to each device :D good luck! Chris

Upvotes: 0

Related Questions