SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Responsive Design Unresponsive

    I have this simple code for this site to reformat the images within the banner, but the tablet device is not responding. The idea (and I know I need to work on the menu) is to get it to fit within the borders of the tablet device, but the images are not resizing and the right image is sticking out beyond the containers wall.

    Anyone have any suggestions?

    Code:
    #otherbod, #header, #content, .sty, #footer { width: 100%; }
    p { font-size: 100%; }
    .moduletablemainmenu ul { margin: 0; padding: 10px; }
    #content { max-width: 768px; margin: 20px 0; }
    .moduletableslid img { width: 38%; height: auto; }

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    139
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I do notice that the footer is responsive. So perhaps looking at how it is set up would give some clues about why the other sections are not?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    You've set some divs to width: 100%, but your header div is set to 1098px, and doing things like that is asking for trouble if you want a page to be "responsive". You can reset things like that with @media rules. It's also a good idea to include this meta element

    Code:
    <meta name="viewport" content="width=device-width">
    I recommend you read up on responsive design to get a sense of what it involves.

  4. #4
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, I've spent some time reading about Responsive Web Design and have managed to make some alterations on a different site using some separate CSS coding (still making some adjustments). My hiccup is now with Google Chrome on the Thrive device, landscape mode. My main menu keeps wrapping to two lines. I thought I 'fixed' this issue by creating this:
    <script type="text/javascript">
    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    document.write('<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/chrome.css">');
    }
    </script>

    with separate css for the Chrome browser (.jt-menu a {padding-left: 1.4em!important; padding-right: 1.975em!important;}), which seems to work on desktop browser but not the Android Viewport (maybe I should fine-tune my script for the viewport device?).

    I know there's no way to make a cure-all for all mobile devices, but it would be nice to figure out where I'm going wrong on this one.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't make menu items fill the full width of a nav bar by simply using padding to make it just fit. Browsers all render text at different-widths and have different letter spacing and kerning etc. There can be up to 20px difference along the width of a nav between browsers with certain font and text sizes.

    If you don't float the last item but let it fill the available space then you can get rid of the padding on the last item saving quite a few pixels and gives a reasonable buffer.

    e.g.
    Code:
    .jt-menu li:last-child{
    float:none;
    overflow:hidden;
    padding:0;
    text-align:center;
    }
    .jt-menu li:last-child a{
    padding:-right:0;
    padding-left:0;
    }
    Text will still wrap if users enlarge text of course and another method would be to size every menu item exactly and just centre the text within and no padding on any item is needed. This would allow for quite a few resizes before text would wrap.

    Or you could for ie8+ use display:table and display:table-cell properties to allow the text to wrap within each cell and not wrap to a whole new line.

  6. #6
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the pointer, Paul O'B.

    That little fix seemed to have done the trick.

    I'm very grateful for people like you who help us excel!


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
  •