Odd gap to right of footer div on mobile devices

The problem is that on your site, the Instagram gallery is the only thing that is responsive, nothing else is. If you make the browser on your desktop narrower, then everything should get narrower, not just the Instagram gallery. But many of the elements have fixed widths, which prevents them from resizing properly. For example, when you make your browser narrower, the three footer widgets should collapse on top of each other. But because the footer widgetized container has a width of 1140px, the footer never resizes and the widgets stay on one row. Same with all of the other container elements, they all have fixed widths.

So, you can either make everything else responsive, or you can make the footer container fixed by setting the width to 1140px instead of 100%:

.footer {
   width: 1140px;
}

@crouchingbruin,

Thanks for that! I have gotten to work on those issues, and it seems to NOW be doing what I want it to! BUT – now I’m running into a little error – when I try and center all of the little divs on my footer that make up the footer menu, they don’t respond properly, and are all left-aligned… how do I fix this?

Thanks again!

OK, one of the tools for making sites responsive is using something called a media query. In terms of responsiveness, a media query allows you to specify different CSS based on the width of the screen. For example, you may want to display a mobile menu (like a drop-down or a hamburger menu) instead of the full menu when the screen is below the width of a tablet (something you might want to think about for your own site).

In the case of your footer widgets, you’ve set the width to 20%, which is great, they resize themselves appropriately on narrower viewport widths. However, they start looking squished together when you get to smaller screen widths. This is where you can use a media query.

You typically create a media query section at the end of your stylesheet, so that the media query rules will override the “normal” rules. So add this to the end of your stylesheet:

/* These rules are for a tablet */
@media only screen and (max-width : 768px) {
   .footerwidget {
      width: 100%;
      margin-bottom: 20px;
      border-bottom: 1px #ccc solid;
   }
}

So what this does is when the screen width goes under 768px, which is the width of an iPad, the width of the footer widgets go to 100%, and they will “collapse” on top of one another. I also added a border-bottom property so there will be a clear visual division between the widgets.

You can add other media query sections, too, based on your design needs. For example, some developers might add another section for screen widths up to 320px, which is the width of a smartphone.

Thank you SO much for this! Fixed my problem right up – CrouchingBruin, you’re a lifesaver!