Responsive Design Unresponsive

HTML & CSS
1

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?

#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

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

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

<meta name="viewport" content="width=device-width">

I recommend you read up on responsive design to get a sense of what it involves.

4

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

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.



.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

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!