How to make this responsive?

[Common]

Hello there

I was wondering if someone could suggest any techniques I could use to make the following blog page display well in a mobile browser (such as an iphone):

http://www.intouristuk.com/Blog

What happens is, as you'll see if you open the page on your phone, the browser wants to show the full width of the banner, which really isnt very important, but as a result the blog posts are squished into a tiny column. Sure you can zoom and read it fine but I would like it look good from the off.

Would there be a way to tell the mobile browser to scale the banner right down? Or perhaps I should just go down the route of not loading the banner on a mobile browser.

Any suggestions welcome!

[tracknut]

I would make a few banners of different sizes to correspond with your specific media queries. The smaller the site, the smaller the banner should be. And yes, possibly the smallest site has no banner at all.

Dave

[StevenHu]

I suggest not loading the banner. The links under the banner need to change too, so they become easy to tap.

[hdewantara]

I've been playing using Ctrl+Shift+M and Ctrl+Shift+I of my FF.18,
and I could think of some quick & dirty rules, below.

But I think you might need to check them first,
because I haven't tested them on mobiles or other desktops

#masthead > a{
  display: block;
  overflow: hidden;
}
#bottom_menu{
  width: auto;
}