• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Display problem with Mocha Theme

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Display problem with Mocha Theme

This topic is: not resolved

Tagged: Mocha

  • This topic has 8 replies, 3 voices, and was last updated 4 years, 10 months ago by Joe Siegler.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 22, 2018 at 9:46 am #218244
    Joe Siegler
    Member

    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
    March 22, 2018 at 10:22 am #218245
    Christoph
    Member

    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

    March 22, 2018 at 10:33 am #218248
    Joe Siegler
    Member

    "add an additional media query somewhere"

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

    March 22, 2018 at 10:34 am #218249
    Erika
    Participant

    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!

    March 22, 2018 at 10:36 am #218250
    Joe Siegler
    Member

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

    March 22, 2018 at 10:57 am #218251
    Erika
    Participant

    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.

    March 22, 2018 at 11:15 am #218254
    Joe Siegler
    Member

    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.

    March 22, 2018 at 11:38 am #218255
    Erika
    Participant

    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.

    March 22, 2018 at 11:51 am #218256
    Joe Siegler
    Member

    "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
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble