• 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

Essence Pro Theme Mobile Responsive Display Problems

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 › Essence Pro Theme Mobile Responsive Display Problems

This topic is: not resolved

Tagged: Essence Pro, mobile responsive

  • This topic has 5 replies, 5 voices, and was last updated 6 years ago by janef.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 23, 2019 at 2:27 pm #490226
    GeneW
    Participant

    Hello,

    I'm using the Essence Pro theme at https://genewhitehead.com and my mobile display is displaying text with just a few letters at a time on each line. There is also a side scroll being produced.

    After searching the forums and online for solutions, I admit defeat. Is there anyone who could look at this and help direct me to steps I could take to troubleshoot, or even a solution?

    Thank you.


    Writing at Simple Theology, Messy Life | Resources for Spiritual Growth

    https://genewhitehead.com
    March 23, 2019 at 3:32 pm #490228
    Victor Font
    Moderator

    Your site seems to be missing some mobile CSS. Eiether that or there may be a bug in the style sheets that is preventing the mobile CSS from being read.

    The front-widgets should adjust so each post is stacked one atop the other. The width, padding, and margins should also auto-adjust.

    As for the side-scroll, this is coming from your flex box arrangement in the footer-cta. It looks like you added a lot of custom code and didn't adjust for the display in the media queries.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    March 25, 2019 at 3:23 pm #490270
    GeneW
    Participant

    Hi Victor,

    Thank you for your help. It looks much, much better now!

    I ended up having to do away with my flexbox while I try to figure out how to adjust for mobile display in the media queries. Do you happen to know a resource where I can find that?

    I tried by adding min-width: 200px; to the .flex-wrapper and the .card lines on my css but that didn't do anything at all.


    Writing at Simple Theology, Messy Life | Resources for Spiritual Growth

    May 19, 2019 at 7:58 am #491231
    thinkmedia
    Member

    I just ran into this exact problem with Essence Pro.
    I have three widgets on the home page and they don't resize on mobile so I had to add custom css to do it.


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

    .flexible-widgets.widget-thirds .widget {
    margin-bottom: 20px;
    padding: 20px;
    }

    }

    You can adjust the max-width for where you want the point of adjustment to occur.

    Pretty annoying for the theme not to do it as it is intended.

    Hope that helps.

    May 20, 2019 at 12:10 pm #491250
    urdunovels
    Participant

    I have the same problem at my site NewNaat. when I check it on my mobile which is 360px wide then the browse element Like A B C become so smaller.

    June 17, 2019 at 8:21 am #491667
    janef
    Participant

    Hi, I'm running in to the same issue with reducing padding on mobile display between front page widgets in Essence Pro.I tried the following but this did not change anything. I also changed margin-bottom to 0px but this did not change anything either.I am using the Front Page 1 and Front Page Featured widgets and there is too much padding between the two on mobile display.Any feedback would be greatly appreciated. https://bit.ly/2IkwceO


    @media
    only screen and (max-width: 860px) {
    .flexible-widgets.widget-fourths .widget,
    .flexible-widgets.widget-halves .widget,
    .flexible-widgets.widget-thirds .widget {
    float: none;
    margin-left: 0;
    width: 100%;
    margin-bottom: 20px;
    padding: 20px;
    }

    }

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 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

© 2025 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