Making responsive website

Could someone please guide me with the following problem. I’m trying to make my site, Hollywood’s Golden Age, into a responsive site and I’ve been following a You Tube video, HTML5 Responsive Website - Start to Finish by Drew Ryan. He explains everything very well but I’ve run into trouble with my nav media queries -I can’t get the list items to line up horizontally in narrow width.
My media queries are:

@media screen and (max-width: 740px)
{
   .left-col {
 width: 100%;  
}
.sidebar {
  width: 100%;
}
nav li a {
  display:inline;
}
}

Mt test page is: http://www.hollywoodsgoldenage.com/test.html

There’s still a lot to do but I want to get it properly responsive before I tinker with it any more.
If anyone could please point me in the right direction I’d be most grateful.
Thanks in advance.
Chris

Have you fixed this? Other than not all fitting on the same line (because there’s no space) they seem to be lined up horizontally on Chrome. Is the issue that you want them all to fit on one line?

sorry, I meant vertically in narrow width! I want them to stack top to bottom if possible.

You’d also need to unfloat the links in your @media rules, or only float them in a media query for larger screens.

I recommend you switch most of those styles to the LIs, though. It’s better to organize the LIs in a row / vertically, and style the links appropriately within them.

Fantastic. That’s done the trick!
My grateful thanks to ralphm and OzRamos for taking the time and trouble to help out.
Cheers,
Chris

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.