Site is responsive, all except for…

[jack96161]

I’m upgrading a site formerly on Weaver II pro to Weaver Extreme & WE Plus. Working prototype is – http://www.highsierradesign.com/WRC/

I’m re-producing the sliding panel menu from the old site – http://www.whiteravencenter.org/ – which used some custom Motools code and was definitely not responsive. To do this, I’m using a plugin Accordion Slider – http://bqworks.com/accordion-slider/ – which is responsive but only down to a smart-phone screen size, where it goes crazy. The plugin developer responded to my question about this with:

“Hi. The accordion will take the size of the container that it is in. In
this case the container is the one that changes its size and becomes
wider and then the accordion simply adapts. There are some CSS media
queries for the ‘#header-widget-area’ element that control this size.”

I’m placing the Accordion Slider shortcode in the header widget area, centered, width=50%. It looks like something in the theme is changing the widget container, header-widget-area at some narrow window width, specifically, the width=50% is being over-ridden. How do I control this?

Also, I know Weaver has a sliding menu available, but the accordion mode is only available in a vertical menu, not horizontal. Maybe a future enhancement? (hint, hint).

[scrambler]

You need to explain what settings and custom CSS you used on the header widget area, as there is definitely a conflict between your rules and the theme rules.

I see a rule

#header-widget-area {
    left: 35%;
    margin-top: 12%;
    position: absolute;
    width: 50%;
    z-index: 100;

Which contains a left positioning and that is conflicting with a theme rule that sets the width of the area on phones.

Also you rule is invalid because it is missing a closing bracket } that could break things

before giving you possible corrective CSS, we need to know exactly what options you used in the Header widget area section, what custom CSS, and where you put it

[scrambler]

The proper way to get your header widget area to be 50% wide and on the right would be the following

Put 50 in MAin options > Header > Header Widget Area > Width box

Below that select Align right in the Align Area Drop down list.

This will make the area 50% wide and aligned right on desktop and small tablet, without using any custom CSS like the left:35% that you seem to be using

There will be a rule that expands it back to 100% on phone, as on such a small screen, the area would become too small

If you do not want the area to expand on phone, you could add the rule below in main options > Fonts & Custom > Custom CSS Rule box 

.is-phone #header-widget-area {width:50% !important;}

But I don’t believe that your slider menu would look any good in 50% of the width of a cell phone 🙂

[jack96161]

Thanks scrambler, I agree it will probably be too small on a small cellphone, but I can work on that when I solve this problem. I’ll try your suggestions, which sound spot on… and will report back.

[Author]

Posts