Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder Common's Avatar
    Join Date
    Jan 2009
    Location
    Glasgow, UK
    Posts
    133
    Thanks
    16
    Thanked 13 Times in 13 Posts

    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!

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,390
    Thanks
    11
    Thanked 295 Times in 294 Posts
    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

  • #3
    Regular Coder
    Join Date
    Jun 2011
    Location
    CA
    Posts
    105
    Thanks
    0
    Thanked 10 Times in 10 Posts
    I suggest not loading the banner. The links under the banner need to change too, so they become easy to tap.

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    371
    Thanks
    9
    Thanked 54 Times in 53 Posts
    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;
    }
    Last edited by hdewantara; 02-03-2013 at 01:07 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •