• 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

Website not mobile responsive

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 › Website not mobile responsive

This topic is: not resolved

Tagged: not mobile responsive

  • This topic has 5 replies, 3 voices, and was last updated 4 years, 8 months ago by meltdown.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 5, 2018 at 8:49 am #219557
    meltdown
    Member

    Theme: Magazine Pro

    When viewed on a mobile device I see that my site is not mobile responsive (users must scroll left & right to view full page content).

    I don't believe that was the case before so I must have messed something up. Might one of you be able to help me resolve this? Thanks so much!

    https://glasshausitaly.com
    May 6, 2018 at 9:12 am #219575
    Gary Jones
    Member

    The styling of the <div class="home-middle widget-area"> and the section / articles inside of it is off - widths + margins being more than 100% etc.


    WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

    May 6, 2018 at 10:13 am #219585
    meltdown
    Member

    Hi Gary - Thanks for your response. I see what was the culprit. I want to increase the width of my content area and decrease the width of my sidebar. To do so, I added the following to my Additional CSS Customizer:

    .site-inner,
    .wrap {
    	margin: 0 auto;
    	max-width: 1200px;
    }
    
    .content {
    	float: right;
    	width: 900px;
    }
    
    .sidebar-primary {
    	float: right;
    	width: 260px;
    }

    This did the trick but obviously threw the mobile responsiveness out the window. Can you tell me how I might achieve the desired results without doing so?

    Thanks!

    May 7, 2018 at 4:15 am #219605
    Gary Jones
    Member

    You'll need to add in responsive styles -

    
    /* Your styles go here for all sizes UPTO XXXpx */
    
    @media only screen and (min-width: XXXpx) {
     /* Your styles go here for all sizes AT OR ABOVE XXXpx */
    }

    WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

    May 7, 2018 at 4:29 am #219606
    Sridhar Katakam
    Participant

    You might also want to look at media queries and adjust the width values.

    An alternative approach is to replace the floats with Flexbox. Here's fully modified Magazine Pro's style.css with the same widths for content and sidebar as the stock Magazine Pro, but with floats replaced by Flexbox. It should be easy to change the % width values for .content and .sidebar to your liking.

    https://pastebin.com/raw/ABgdgSHN

    Note: Modified for and tested only in content-sidebar layout.


    Genesis Tutorials | Follow me on Twitter

    May 7, 2018 at 9:14 am #219616
    meltdown
    Member

    Thank you both for your responses. Sridhar, your idea intrigues me but I'm afraid I'm out of my league. If you have time, would you be so kind as to tell me how to implement it for each screen size?

    As for adjusting the width values; how does one know what the next set of numbers should be? For example, for @media only screen and (max-width: 840px), how do I determine the correct .content and .sidebar values?

  • 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

© 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