Agency Responsive Not Working

[cyberinfinity]

I've just launched a site using the Agency theme with quite a bit of modification.

http://www.lowabram.com

When I view it on my smartphone or resize the browser, none of the responsive changes are happening. I added a bit of code to make the header image resize and that's working, but the menu isn't changing, the big image on the homepage isn't resizing and there's a horizontal scroll. The only thing that seems to be working is that the text itself is resizing to fit the browser.

The whole reason for using this theme - actually, the whole reason for convincing the client to do a complete redesign - was to make the site responsive, so we really need to figure this out.

Any ideas?

thanks,
Beth

http://www.lowabram.com

[AnitaC]

Agency's responsive design was set up to work with the out-of-the-box theme (as in the demo). You have modified the theme to such a degree that if you did not modify the Media Queries or Responsive Design elements at the bottom of the style sheet - your new customizations will not appear responsive. So you will need to code your media queries/responsive design area to match the new theme you customized.

---

Need help with customization or troubleshooting? Reach out to me.

[cyberinfinity]

That makes sense, but I'm not sure which of my modifications broke it or what I need to change in the media queries.

(Sorry, I've never coded any responsive stuff myself, it's just happened magically 🙂 )

Most of my modifications are visual things like colors/borders/etc, but I have changed the widths of the content and sidebar (but the whole wrap), and changed sizes of the dropdown in the secondary menu,

Would that change my breakpoints for the media queries or what needs to happen at each of those sizes?

For example, I can size my browser all the way down to nothing, and the menu line-wraps, but never changes like in the demo. And, other than sending the sidebar to the bottom when it gets too small, nothing is resizing at any width, I just get a horizontal scroll.

[AnitaC]

Comparing the two themes - The Agency Demo is using the Header Right Widget area for the Menu/Navigation - you are not. The Header Right Widget area was made to be responsive in the media queries. The navigation you put in place has not. So therefore you need to add it. I see some other things in there that aren't responsive. You should probably just take one element at a time and make small adjustments until you can get it the way you want it.

---

Need help with customization or troubleshooting? Reach out to me.

[cyberinfinity]

Ah, I see. Switching to the header right menu, it's responding correctly, although the text/image in the content area still isn't, so there's still an issue there.

But, unfortunately, the client wants the full-width logo, with the menu under it, and I don't know that we're going to convince them otherwise. So, I think I'm going to need to find a way to make the secondary menu responsive.

Any suggestions?

[cyberinfinity]

I've got the content resizing, I just needed to set #inner to a width of 100% in the media query. I also and added a line there to change the blue/red background to a solid blue when it gets small enough to send the sidebar to the bottom.

Using the header-right menu it looks great, both on my phone and just narrowing my browser:
http://pennsylvaniamalpractice.com.php53-5.ord1-1.websitetestlink.com/

But with the secondary menu, even with a plug-in to resize the header image, it's not quite right:
http://www.lowabram.com/

We're running that first one by the client to see if they can live with it, meanwhile I'm still looking for a way to make the secondary menu responsive.

[Tony @ AlphaBlossom]

I hope I don't confuse things by jumping in, but I thought I'd give some input.

There's a lot of issue that are preventing this from working correctly:

- When you use width: 100%, you have to take into account for borders, margin, padding, etc. So if you have a width: 100%, and a border width of 6px (12px total left and right), adding that to 100% means your content will be wider than your container...which is why it's cut off a little. Adding this code recommended by Paul Irish (recommend reading the article for a better understanding) will help because the border and padding will be included in the 100% (meaning the outer width is 100% and the border and padding are subtracted from that...much easier to deal with:

/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

Be careful with that though because it applies to all elements, so might cause issues with some plugins. If so, you can apply the rule directly to whatever you need such as:

#subnav .wrap {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

- You have a fixed width of 960px on your #subnav .wrap and .menu-secondary. If you're using the border-box model, you can change this to

max-width: 960px;
width: 100%;

Then you will have to tweak your nav settings, depending on how you want the menu items to look for various screen sizes.

That should get you closer.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts