SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Perth W.A.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive template not working

    Hi,
    I have used a responsive template on a site I'm building and it does not work on my iPhone.
    Can someone please have a look and suggest why this may be?

    Any help appreciated.

    http://vnrstone.webdesignperth.com.au/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Those boxes underneath the slideshow are positioned absolutely and are not responsive at all. The third one is placed way off to the right, for example. So you'll either need to reposition them on smaller screens or rethink your approach to this. I don't see the need for abs pos there are all. Perhaps just float them?

    Get this working on desktop first. If you narrow the browser window, you see the problem there too.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Perth W.A.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph, That makes sense. Would this also be the cause of the slogan not resizing and the menu disappearing?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Argent View Post
    Would this also be the cause of the slogan not resizing and the menu disappearing?
    Not sure what the slogan is, but the logo is having problems because of tis width setting, which needs to be changed on smaller screens:

    Code:
    .row-fluid .span7 {
    width: 65%;
    background: url("http://vnrstone.webdesignperth.com.au/wp-content/uploads/2013/08/menu-logo.png") no-repeat 0 0;
    height: 60px;
    margin-top: 15px;
    }
    The menu isn't working because of the left setting here:

    Code:
    .navbar .nav {
    position: relative;
    left: -250px;
    display: block;
    float: left;
    margin: 7px 10px 0 0;
    width: 780px;
    }
    Unfortunately, in responsive design you can't leave a single stone unturned. You need to scrutinize every style and consider how it will affect things at each viewport size. To prevent styles operating in all conditions, start to group them within media queries.

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Perth W.A.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks Ralph! will knuckle down again :-)


Bookmarks

Posting Permissions

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