Sidebar push-down problem on Genesis/Prose…how to make responsive width?

[Styve1]

I assumed maintenance responsibilities for a site built on the Genesis framework, with a Prose child theme, and I would like to fix the disappearing sidebar (gets pushed down on smaller screens), but I am not familiar with how to work with plug-in/widgeted sidebars. The only way I see that I could get a responsive width site would be to change themes, but that would lose some custom design that my client wants to keep

It really is a simple site(not worth all the customization, I don't think), and I have exported its contents into two different themes, both of which seem like decent replacements with better formatting. I was told by the web-designer who created the site that she had stopped using Prose a while back because it wasn't flexible enough. About addressing the sidebar problem, she said, "All sites, responsive sites, automatically drop the sidebar to the bottom of the page. The only way around that is to use css media queries to style a different layout for each screen size. This means basically making 6 renditions of a website."

The site giving me trouble is equinoxpdx.com and the demo sites I prepared to try to fix the disappearing sidebar issue, are at equinoxdemo2.wordpress.com, and equinoxdemo3.wordpress.com.

Thanks,

Steve

http://equinoxpdx.com

[nutsandbolts]

The designer is correct - the sidebar dropping below the content is a web standard for mobile responsive sites. It's necessary for smaller screens so the visitor can read the content without a lot of zooming and scrolling. If you want the sidebar to remain in place and for the whole site to "shrink" where it looks the same on phones and tablets as it does on a computer screen, that's not mobile responsive. You could remove the viewport function and all responsive CSS rules, but that seems like way too much work.

Why is the client so concerned about the sidebar? It seems odd to me to create a poor experience for mobile visitors just so the sidebar stays on the side.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Styve1]

Andrea,

Thanks for the response! I appreciate that the page would rearrange on smaller screened devices, but on equinoxpdx.com, the sidebar content drops, or floats, to the bottom of the sidebar, leaving a blank area left of the page content. What I'd like to do is have the page rearrange like on the Demo 3 site I gave a link for. If there is a way to scrap the widget, and/or plug-in that governs the sidebar, and simply work with whatever sidebar parameters Prose has, I would hope that the screen would be more adaptive.

Thanks and I look forward to hearing back.
Steve

[nutsandbolts]

My apologies, Steve - I was in a hurry earlier and didn't look closely enough at the links you posted. Now I see what you're saying about the sidebar on the live site. It's definitely not behaving in the way it's supposed to; it almost seems as if the responsive parts of the stylesheet are missing (though I can't verify that since the CSS is minified).

Can you post a list of the active plugins on the site? Also, can you paste in any custom functions and custom CSS from Genesis > Custom Code?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Styve1]

Right on...thanks so much for taking an interest!

Here is what I can grab from the WordPress backend. Don't know if I answered all your questions, particularly re- Custom Code.

I can't do much on this tonight, but I would dig hearing your thoughts/recs and I would try to implement tomorrow, if you get back to me.

Best,

Steve

Plug-ins...
Akismet
Activate | Edit | Delete

Used by millions, Akismet is quite possibly the best way in the world to protect your blog from comment and trackback spam. It keeps your site protected from spam even while you sleep. To get started: 1) Click the "Activate" link to the left of this description, 2) Sign up for an Akismet API key, and 3) Go to your Akismet configuration page, and save your API key.
Version 2.5.9 | By Automattic | Visit plugin site
Select BackWPup BackWPup
Deactivate | Edit

WordPress Backup and more...
Version 3.0.13 | By Inpsyde GmbH | Visit plugin site | Documentation | Support
Select Fast Secure Contact Form Fast Secure Contact Form
Settings | Deactivate | Edit

Fast Secure Contact Form for WordPress. An easy and powerful form builder that lets your visitors send you email. Blocks all automated spammers. No templates to mess with. Settings | Donate
Version 4.0.17 | By Mike Challis, Ken Carlson | Visit plugin site
There is a new version of Fast Secure Contact Form available. View version 4.0.18 details or update now.
Select Genesis Featured Widget Amplified Genesis Featured Widget Amplified
Deactivate | Edit

Replaces Genesis Featured Post widget for additional functionality which allows support for custom post types, taxonomies, and extends the flexibility of the widget via action hooks to allow the elements to be repositioned or other elements to be added. This requires WordPress 3.0+ and Genesis 1.4+.
Version 0.8.1 | By Nick_theGeek | Visit plugin site
Select Genesis Simple Sidebars Genesis Simple Sidebars
Deactivate | Edit

Genesis Simple Sidebars allows you to easily create and use new sidebar widget areas.
Version 2.0.1 | By Nathan Rice | Visit plugin site
Select WordPress SEO WordPress SEO
Settings | Deactivate | Edit

The first true all-in-one SEO solution for WordPress, including on-page content analysis, XML sitemaps and much more.
Version 1.4.19 | By Joost de Valk | Visit plugin site
Select WP Google Fonts WP Google Fonts
Settings | Deactivate | Edit

The WordPress Google Fonts Plugin makes it even easier to add and customize Google fonts on your site through WordPress.
Version v3.1.1 | By Adrian Hanft, Aaron Brown | Visit plugin site

the Custom CSS~~
/** Do not remove this line. Edit CSS below. */
/*! ---------- ADD ! AFTER FIRST ASTERISK TO SAVE COMMENTS WHEN CSS IS MINIFIED ------------*/
/*!------- MOVE HEADER RIGHT WIDGET UP TO TOP -------*/
#header .widget-area {
float: right;
padding: 0 0 0;}
/*!-----------FS FORM BUTTON PADDING---------------*/
input[type="button"], input[type="submit"] {
padding: 4px 7px;
font-family: Arial, Verdana,sans-serif;
font-size: 12px;}

/* Content Boxes
------------------------------------------ */

.content-box-blue,
.content-box-white,
.content-box-yellow {
margin: 10px 0 25px;
overflow: hidden;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 0px 0px #bdbdbd;
-webkit-box-shadow: 0 0px 0px #bdbdbd;
}

.content-box-blue {
background-color: #163555;
border: 0px solid #163555;
margin: -15px 0 0px;
width: 250px;
margin-left: -10px;
}

.content-box-white {
background-color: #f7f1dd;
border: 0px solid #f7f1dd;
color: #163555;
border-radius: 5px;
margin-top: -10px;
width: 250px;
}

.content-box-yellow {
background-color: #fef5c4;
border: 0px solid #fadf98;
}

/* Color Buttons
------------------------------------------------------------ */

.button-red {
background-color: #7A1A1A;
border: 1px solid #7A1A1A;
color: #FFFFFF;
padding: 5px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.15);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.15);
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
font-weight: normal;
}

.button-red:hover,
{text-decoration: none;
background-color: #545640;
border: 1px solid #83a2be;}

/*------------------------Equinox -move content up to top ----------------------*/
.sidebar-content #sidebar, .sidebar-sidebar-content #sidebar {
float: left;
margin-top: -10px;
background-color: transparent;
border-radius: 3px 3px 3px 3px;
}
.content-sidebar #content, .sidebar-content #content {
margin-top: -10px;
width: 600px;
background-color: #f7f1dd;
border-radius: 3px 3px 3px 3px;
padding: 10px;

}
#nav ul {
background-color: #f7f1dd;
border-radius: 3px 3px 3px 3px;
float: right;
list-style: none outside none;
margin: 0;
padding: 0;
width: 95%;
}

#nav {
font-family: 'Simonetta',Georgia,serif;
font-size: 12px;
font-weight: bold;
}

#nav li a:hover, #nav li li a:hover {
background-color: #f5d368;
}

#wrap {
background-color: transparent;
border: 0 solid #EDEDED;
border-radius: 3px 3px 3px 3px;
box-shadow: none;
margin: 10px 0 0;
padding: 0;
width: 900px;
}
.sidebar .widget {
margin: 0 0 20px;}

.sidebar-content #sidebar, h3 {font-size: 20px;}

h1, h2, h3, h4, h5, h6 {
line-height: 1.0;
padding: 10px 0 10px 0;
font-weight:bold;}

/*------------------ FORM -----------------------*/
select, textarea {
color: #222222;
font-family: Arial,verdana,serif;
font-size: 12px;}

/*---------------FOOTER -----------------------*/

#footer {
text-align: center;
color:#163555;
}

The Custom Functions~~
<?php
/** Do not remove this line. Edit functions below. */
/** Customize the credits */
add_filter('genesis_footer_creds_text', 'custom_footer_creds_text');
function custom_footer_creds_text() {
echo '<div class="creds"><p>';
echo 'Copyright © ';
echo date('Y');
echo ' · Beauzartes';
echo '</p></div>';
/** Customize the entire footer */
remove_action( 'genesis_footer', 'genesis_do_footer' );
add_action( 'genesis_footer', 'child_do_footer' );
function child_do_footer() {
?>
<p>© Copyright 2012 Equinox Acupuncture & Massage · All Rights Reserved</p>
<?php
}

/** Remove Header */
remove_action( 'genesis_header', 'genesis_do_header' );
}

On 12/15/13 5:35 PM, WordPress wrote:
> nutsandbolts wrote:
>
> My apologies, Steve - I was in a hurry earlier and didn't look closely enough at the links you posted. Now I see what you're saying about the sidebar on the live site. It's definitely not behaving in the way it's supposed to; it almost seems as if the responsive parts of the stylesheet are missing (though I can't verify that since the CSS is minified).
>
> Can you post a list of the active plugins on the site? Also, can you paste in any custom functions and custom CSS from Genesis > Custom Code?
>
> Post Link: http://www.studiopress.community/topic/sidebar-push-down-problem-on-genesisprose-how-to-make-responsive-width/#post-79324
>
>

[nutsandbolts]

Okay, I'm thinking it has something to do with the custom CSS where the sidebar has been moved. The negative padding seems to be keeping it from clearing the content area. To verify that, try this: Paste all the custom CSS into a document on your computer (so you don't lose it). Then remove it from custom CSS and save - this will break the site and make it look crazy for a minute, but you'll be able to check whether mobile responsiveness works with the code removed. Then you can paste the custom CSS back in and save to unbreak the site again. Try that out when you get a chance and let me know - that will help us decide how to move forward.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Styve1]

Just tried it and the content of the page disappeared and one element of the sidebar was left (the logo), so I pasted the Custom CSS back and it's back to normal. Did you mean to remove the Custom Functions, as well, because I didn't do that simultaneously?

Thanks,

Steve

[nutsandbolts]

No, just the CSS. I was just wondering what would happen.

Since it's always hard to take over from another designer, if I were you, I think I'd load up Prose on a test subdomain, verify that the vanilla site is responsive, then rebuild it the right way. It's so hard to pick through someone else's code and try to figure out what they did... You could probably redo the whole thing in an hour or two instead of spending time looking for the possible issue. Just my two cents.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Styve1]

Hey Andrea,
I am a relative rookie using wordpress.org, so I don't know if it is possible for me to "load up Prose on a test subdomain," or how to do it. That is why I tried to replicate the site on wordpress.com. To create another site, if I use a subdomain, does that mean that I can avoid having to do another wordpress install? As I noted last night, it's a simple site and it doesn't seem worth this level of effort. The sidebar has two static widgets and a menu...doesn't it seem overkill to be using a simple sidebar plug-in, or is that necessary when using wordpress.org? If I could simply return the sidebar to a more basic template, I would think that would be a better route than spending 2 hours sleuthing.
Thanks,
Steve

[nutsandbolts]

If you use a subdomain, you'd need to install WordPress again, though most hosting companies offer a one-click installation that is relatively easy to use. If you want to email me directly (andrea at nutsandboltsmedia dot com) I'd be glad to walk you through.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Author]

Posts