CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   Building for mobile devices (http://www.codingforums.com/forumdisplay.php?f=70)
-   -   How to make this responsive? (http://www.codingforums.com/showthread.php?t=286869)

Common 02-01-2013 11:49 AM

How to make this responsive?
 
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 02-01-2013 04:23 PM

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 02-02-2013 12:10 AM

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

hdewantara 02-02-2013 11:56 PM

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 :)
Code:

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



All times are GMT +1. The time now is 11:01 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.