I am having some minor problems with a couple HTML elements on my RSD page. One contains the menu (built with Menu Builder) and the other a Weather Underground component. They both render and function correctly at around 325 pixels. But as the page is narrowed they don’t scale smaller. The menu is interesting because the buttons remain intact but the blue background gets pushed out of the way from the left. The Weather component simply doesn’t scale.

Being new to responsive design and far from an expert at HTML layout, I’m not sure how to manage this? Do I set a breakpoint for a smaller screen and scale the HTML components down (how?) as they become unwieldy? Is there some other setting I should be trying? I have played around and will continue to but any hints would be appreciated. At first I thought it was some Menu Builder/RSD interaction causing the issue but once I noticed that both HTML components had similar problems I suspecting it was more generic.

The page is viewable at http://jkinchnh.coffeecup.com/index.html

The page is currently only designed for a screen less than 325 pixels so you would need to narrow your browser window to get it to render correctly. Then narrow even further to see the issue.

Thanks in advance for any guidance.

Hi Jeff,

I do not see your MB menu on this page at all. All I see is a bunch of words saying Menu on the left hand column. I do not see your weather Underground link either. Just a few words that say weather link.

OUCH. Duh! My apologies. I was playing around with some layouts, published them, and overwrote the other site, forgetting that people trying to help might be looking at it.

I have restored the site setup that I am asking about.

Hi Jeff,
One suggestion – for really tiny screens, go to one column so you can keep the text at a readable size.
The blue text boxes, welcome message, menu, weather app... every section could be centered by itself, taking up the full width of the screen (minus a few pixels padding). Keeping your body text around 14px at the smallest size (rather then 9px) would make it so much easier to read

Have a look at this CC theme to see what happens to the layout at the smallest screen size:
http://animal-shelter.coffeecup.com/

The weather thingie is not responsive. It has a fixed width of 164px.

I took the width setting out of the weather sticker HTML and set the width parameters for the HTML element it is contained in. The sticker now scales nicely.

I played with the width settings for the HTML element containing the menu and got mixed results. Interestingly the buttons will scale down but the text label on the buttons does not which leaves the text hanging outside the button. The background still gets pushed back. I think I will use the single column solution for small screens to deal with the menu behavior.

Thanks all.

Since the problem is effectively resolved, the pointer to the page is no longer pointing to the issue.