Header & footer width problem on smartphones

The problem isn’t with the header and footer, but with the content (as well as your footer content, but we’ll get to that later).

You have this rule in your custom CSS:

#content-fullwidth {
   width: 700px;
   margin-right: auto;
   margin-left: auto;
}

So what’s happening is that because the content is set to 700px wide, it pushes out the right side of the screen at narrow screen widths. You can actually see this on your desktop. Just make the browser window narrower (like the width of a cell phone or a tablet), and you’ll see that the content area extends out to the right. On a responsive theme, it should adjust itself to the smaller screen width.

What I would do is add a media query to the end of your custom CSS like this:

@media only screen and (max-width: 767px) {
   #content-fullwidth {
      width: auto;
   }
}

What this does is to make the width auto, which will allow the contents to resize itself.

The second problem, though, is in the footer, where you have several professional association logos. Unfortunately, they are placed in a table, and tables are notorious for not being responsive. The best thing to do is to place them in individual DIVs, instead, and make them inline-block and float them left using CSS. Then, when the screen size gets smaller, they will collapse one over the other. Right now, with the table structure, the table cells have to stay on a single row, which pushes the width of the screen out.

Thanks CrouchingBruin! I made the changes you recommended and the site looks much better on the smartphone. I couldn’t get the in-line block float to work, it just threw the logos in pile, so I ended up using a regular float.

As you said, they do collapse over each other. I tried to get the logos to resize for the phone, but it wasn’t working so I’ll save that for a time when I’m not so frustrated. I swear I read how to do new things in CSS on line and most of the time they don’t work for me.

But thanks for your help — once again!

You almost got the footer DIVs right. Here’s what you need to touch up.

For this rule, change the height from 150px to auto:

.associations {
   height: auto;
   width: 70%;
   margin-right: auto;
   margin-left: auto;
   vertical-align: text-bottom;
   bottom: 0px;
   position: relative;
}

For this rule, change the display property from inline to inline-block:

.assocTop {
   display: inline-block;
   width: 25%;
   font-size: 100%;
   line-height: 100%;
   height: 150px;
   float: left;
   position: relative;
}

Finally, add a couple of media queries to change the logo widths from 25% to 50%, and then 100%. These should be added at the very end, after the rule for .assocTop:

@media only screen and (max-width: 767px) {
   .assocTop {
      width: 50%;
   }
}
@media only screen and (max-width: 480px) {
   .assocTop {
      width: 100%;
   }
}

So the first media query will set the widths of the logos to 50% when the screen width is less than the width of a iPad, meaning the first two logos will fit next to each other, and the other two will break to the next row. The second media query will set the widths to 100%, meaning the logos will stack one over the other on screen widths around the size of a smartphone.

OMG that worked! Brilliant! Thank you so much, I never would have figured any of that out myself (as you can tell). It just may be time for me to think about retirement…

Thanks again, you made my day!

No worries, you were most of the way there. You just needed a little help with learning the media queries. I was actually very impressed that you were able to convert the table into floating DIVs so quickly with very little guidance, especially assigning a common class to them and setting the width in the CSS to 25% so they would space equally.

Oh gee thanks, I’m old school and CSS and web dev in general are changing so fast that I can’t keep up. I’m really a designer and should stick to that & keep my hands out of the machinery. ??

DIVS: Well, I almost did them right. I could NOT get the contents of the individual divs to align to the bottom so I cheated and used brs. I tried a few different ways, using position and bottom, to no avail. I figure there was something else I had in there preventing me from accomplishing what I needed, but then there’s always the hack option.

You’re a very kind and patient person, and I appreciate your taking the time to help me out. It’s not the first time, the same issue (smartphones) but the problem is always a little different. Thank you.