Display problem with Mocha Theme

[Joe Siegler]

Now first off, I recognize that Mocha is an old theme. When I looked in the downloads area, it was last updated in 2012. I realize that alone is probably my problem here.

Having said that..

I use the Mocha theme on my site, and have for awhile. I love the theme, and am not particularly wanting to change it. However, I'm having display problems with this, and have for some time. Some details:

Wordpress: 4.94
Genesis: 2.61
Mocha: 2.01
Screen grab: https://imgur.com/q4mBrqc

If you look at the screen grab, you'll see what I'm talking about. On a computer, it looks fine, but on mobile devices, it doesn't. The side is off the screen, and doesn't display right.

In short, I'm looking to fix this. Now again, I realize it might be a "theme's too old, get something else", but I really don't WANT to do that. I've tried replacing it a few times, and I keep coming back to the the theme despite it being broken like that.

Having said that, if it's not fixable, do y'all have another theme that mostly looks like that? Had a peek, and it doesn't seem so, but I thought I'd ask just in case.

http://joesiegler.blog

[Christoph]

Hi Joe,

looks like you'd have to add an additional media query somewhere between 1200px and 800px (or change the 800px media query to "kick in" at a larger screen size, e.g. 990px.)

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Joe Siegler]

"add an additional media query somewhere"

OK, now off to see what the deal with that is. 🙂

[Erika]

Hi Joe!

I looked at the screenshot and it seems all you need are some tweaks to the existing mobile responsive code inside your theme. I also looked at your site on a few other devices and spotted a few more issues. I don't know how code savvy you are, but I could share a few pieces of code and tell you where to place them, or you can hire me to resolve these issues for a modest price.

I'll do what I can to help you keep the Mocha theme!

[Joe Siegler]

I'm fairly code savvy, but not like the biggest expert out there. I can make some tweaks, sure. Danke.

[Erika]

Ok, here are some easy tweaks:

In line 1790 of your style.css file, change the width to what's in bold:

.content-sidebar #content, .full-width-content #content, .full-width-content.mocha-landing #content, .sidebar-content #content, .sidebar-content-sidebar #content {
padding: 20px;
width: 90%;
}

This will keep your content from overflowing the screen when viewed by cellphone. Also, follow the advice of what Christoph gave above. These two things may solve it.

[Joe Siegler]

OK, I made your change Erika. Didn't seem to make a difference. Dumped cache, checked multiple browsers. 🙁

Not entirely sure what to do with what Christoph suggested, however.

[Erika]

Joe,

The code I offered was to fix the post text overflow I saw on my cellphone, and it did fix that after checking.

In line 1683 of your style.css, change the following code to what's in bold:

.content-sidebar #content,
.sidebar-content #content {
width: 93.5%;
}

This should resolve your iPad issue. Also, I have some apple devices and they take forever to flush out the cache sometimes, even after doing it manually.

[Joe Siegler]

"The code I offered was to fix the post text overflow I saw on my cellphone, and it did fix that after checking."

My bad. Misunderstood. Will go do this shortly, and report back.

[Author]

Posts