Really should I just remove the Responsive Design?

[computerkitten]

Client has questioned the "look" of the Responsive Design after a lot of customization that was done to achieve this "look"... Education Theme... with not really liking the stacking menu and everything falling underneath.  Maybe its just too because a lot of websites are not built with this responsive look.  I'm wondering if I should just take the whole section out.

Thoughts?

Website is here:

http://tinyurl.com/ag5zvfk

Thoughts?

Thanks,

CK

[Jeremy]

Not too sure of the response you are looking for, but I agree with your client. I love responsive design but if the menu doesn't collapse then I don't think it's good usability and a waste of screen realistate.

---

If you want to say thanks Follow me on Twitter | My Website

[Bill Murray]

You shouldn't ditch responsive design, but ...

1) Your link has issues with the responsive design. See how your posts are chopped off on the right side on small devices.

2) Because of the type of menu this client has and because of the way StudioPress currently implements a responsive menu on the Education theme, you chose a less than ideal theme for this combination. See the responsive menu on our Quik demo. With a long menu, you need a mobile menu similar to that used in our Quik demo. Since we do managed WP hosting, if we were to host this site, we'd move the site for free; you could then pick a Genesis theme with a better menu, and fix whatever broke in switching from 1 theme to another (might be a little or a lot depending on what you did to get where you are and the theme you choose). Ignoring hosting, you have to go through those same steps (easier/cheaper with us, but steps are the same), and although this might seem like some work, I personally think it's a better route than ditching mobile responsive functionality. Mobile is about 30% of traffic today and growing rapidly, while desktop use is stagnating/declining. Most businesses can't afford to ignore 30% of their traffic or invest in a website that isn't serving it well.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[computerkitten]

Okay I would like to just only fix then the chopping off of the posts on the home page... everything else works "good enough."... I had actually hired someone through StudioPress to make the site responsive and discovered this issue but now have not heard back from them yet.

So if I could get some guidance here on only fixing the posts that would be most appreciated.  To trash this site and start over is not an option... the client will accept it as is if the posts are fixed.

Thanks,

CK

[Bill Murray]

If you've hired someone to fix the mobile responsive issue, your best bet is probably to push them to see that through to completion. If you get advice here in the forums and someone is pursuing that through a separate path, you're bound to have a clash.

Meanwhile, you can speed up the process by looking at any changes you made to the default theme with respect to width in either those areas of the home page that aren't working or the media queries. Since the unmodified theme works, the problems more than likely come from unintended consequences of changes you made.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[computerkitten]

Yes I had hired Brian Lis to make the responsive design look good.  And not able to get a response back from him after several days.  So my hands are a bit tied.

I know that I need to modify a section with CSS in the mobile section...the issue is...I don't know what section for the Iphone.  I could probably fix this myself if I knew exactly where in the styles.css file I need to be to edit this and get it so these posts on the home page look good.

Can you please advise just that?

Thanks,

CK

[Bill Murray]

In the original Education theme, the media query for the Iphone starts about line 2689.

However, the media query in the original Education theme works, so your real issue is doing a comparison of the changes you made to the stylesheet relative to the original. You could do this with Notepad++ and a plugin for that editor that does comparisons.

Keep in mind that it may not be a problem with a change you made to the media query, but rather a change you made to the stylesheet for that section. Therefore, you can focus your review for comparing just that section of the original Education theme and your modified version. If you identify what you changed, I'll tell you what change produced the problem.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[computerkitten]

Thanks for explaining I will attempt this then!

You mentioned "Notepad++ and a plugin for that editor that does comparisons."... are you saying there is a Notepad ++ plugin I need to get or do I just need Notepad++ and something else?

Thank you for your help!

CK

 

 

[computerkitten]

Okay so I downloaded the original Education style.css file.

I virtually have an empty section for the max width of 400px (which I added below it a 320px max width thinking that is what was needed for the iPhone but maybe not).  Possibly I should go back and remove this 320px max width.  Not sure why so much has been removed for the 400px section.

This is all that is in this max-width 400px section being way different than the original:

@media only screen and (max-width: 400px) {

.post-info,

.post-date,

.post-meta,

.breadcrumb {

display: none;

}

HERE IS THE ORIGINAL MEDIA MAX WIDTH OF 400PX THAT I DOWNLOADED FOR COMPARISON, OBVIOUSLY MUCH MORE CODE:

@media only screen and (max-width: 400px) {

.post-info,
.post-date,
.post-meta,
.breadcrumb {
display: none;
}

#subbox {
margin: 10px 0 !important;
}

#home-featured .featured .widget {
width: 100%;
}

#home-featured .intro,
#home-featured .intro p {
font-size: 30px;
line-height: 1.2;
}

#home-featured .inner {
padding: 30px;
}

#sidebar-alt {
margin: 0 !important;
}

#header .widget {
float: none;
}

#header .widget-wrap {
padding: 10px;
}

#header .menu {
float: none;
position: relative;
width: 100%;
}

.menu-primary li,
.menu-secondary li,
#header .menu li {
float: none;
}

.menu-primary a,
.menu-secondary a {
padding: 11px 15px;
}

.sidebar {
margin: 0 20px 20px;
}

h1 {
font-size: 38px;
}

h2,
h2 a {
font-size: 28px;
}

h3 {
font-size: 26px;
}

h4 {
font-size: 20px;
}

.post {
margin: 0 0 25px;
padding: 0 0 25px;
}

#content {
margin: 20px;
width: 90% !important;
}

.comment-list li,
.ping-list li {
padding: 15px;
}

#author,
#comment,
#email,
#url,
#comment {
width: 90% !important;
}

}

[Bill Murray]

1. You need Notepad++ and a plugin for Notepad++. Here's the link to the plugin for doing compares:

http://npp-compare.sourceforge.net/

2. On your media queries, my quick recommendation is that you copy the current stylesheet to a new file (that will include your media query changes) and then replace all of the media queries in the current stylesheet with the media queries from the default theme. It's possible that you had some bad changes to the media queries. Then, compare the backup of the stylesheet you made to the new stylesheet you just created (where only the media queries changed). Only compare the media queries. If reverting to the default media queries fixes the issue, then you can reasonably conclude that the changes you made to the media queries broke something, and the compare plugin will help you to find those changes. If just changing the media queries doesn't fix your problem, then the problem was caused by another change you made in the sytlesheet, so compare the new current stylesheet with the default Education stylesheet, paying attention to everything BUT the media queries (since the new current stylesheet has the default Education media queries already).

I think that ought to get you on the right track. Maybe you'll catch up with Brian in the meantime and he can expedite the whole process.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[computerkitten]

Thanks again for your explanation.  I think what I will do then is just copy the entire @media only screen and (max-width: 400px) because pretty much that entire section was eliminated.  Just the little bit above.

Will back up everything... let you know how it goes.  Also... are you available for hire too?  If so PM me.

Thanks!!!

CK

[computerkitten]

Also I saw what is causing the problem...finally!

.featuredpage .page, .featuredpost .post is set to 600px.... when I change that to like 90% it fixes it... issue though is that the Categories that were in that "appearing" 2nd column disappear and fall below.  What I truly need now is to know how to make it 2 columns so that the Categories can go in that instead.  Then I'm set.  Not sure how to change the layout for the Home page but may be in Genesis default, will see.

CK

[computerkitten]

Alright... it looks like I can't have a true additional column on the home page... after putting Categories in different widgets nothing made it a real separate category.  I guess its really meant to go underneath the posts...  PM me if you know of a way of fixing it for hire.

Thanks!

CK

[Bill Murray]

1) There's no PM available on these forums, alas.

2) I do managed WP hosting. These sorts of issues would be handled free of charge for a site hosted with us. Outside of getting paid for hosting (which is very cheap, perhaps too cheap, but it is what is), we don't charge for theme support, so being hired for that isn't what we do.

3) I don't think you have the problem solved just yet. My quick look still shows something off. I see "...401(k) retirem" as the line on the 1st post, which isn't right.

4) You're right the 2nd column that you've added is breaking the layout. My quick take is that this might be better in the sidebar, rather than a 2nd column in the main content area. With that approach you could go back to a layout more like the original theme. It also appears you've made a number of other changes to the child theme's stylesheet. Note that your navigation is in reverse order on an iPhone layout compared to a standard desktop view. That means the 2nd column is not your only problem. As I've said in previous posts, until you get a handle on the changes you made or revert back to a known working responsive layout, it's going to be difficult to solve this by poking here and there.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[computerkitten]

Okay so I am going to try to talk the client into just having that information in the column it should have just gone into to begin with, ha!  So waiting actually on the client at this point for that.  I do know there are still problems with the site right now... until I hear back I really don't want to make any adjustments.

Thank you for looking at all of this too I really do appreciate it and understand now there is no paid support unless we switched hosting which would be a big stretch getting a client to change over.  Brian did though get back in touch with me so that is good!

Thank you!

CK

[Author]

Posts