• 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

Mobile Responsive Sites

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 › General Discussion › Mobile Responsive Sites

This topic is: not resolved

Tagged: mobile responsive design

  • This topic has 19 replies, 3 voices, and was last updated 11 years, 4 months ago by krystyn.
Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • February 28, 2014 at 1:41 pm #92860
    jessicakstudio
    Member

    Hi,

    Can anyone point me in the direction of tutorials on the topic of mobile responsive sites for Genesis?

    My site is mobile responsive, but I am wanting it to look the same across all devices.

    For example:
    http://www.chrissishields.com/

    It looks the exact same in the computer browser, as it does on the iPad & iPhone.

    Thanks for any help,
    Jessica

    February 28, 2014 at 1:47 pm #92861
    nutsandbolts
    Member

    If you want to remove mobile responsiveness, there are generally 3 things to remove/change:

    (1) Remove the following from functions.php (assuming your child theme is HTML5):

    //* Add Viewport meta tag for mobile browsers
    add_theme_support( 'genesis-responsive-viewport' );

    (2) Remove the entire media queries section from the end of your stylesheet.

    (3) Search for any "max-width" rules in your stylesheet and change them all to just "width."


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    February 28, 2014 at 2:11 pm #92866
    jessicakstudio
    Member

    Thanks Andrea!

    That was exactly what I was looking for!

    So as long as the theme is HTML5, it should be good on different devices?

    February 28, 2014 at 3:05 pm #92868
    nutsandbolts
    Member

    Yes, that's correct. If it's an older child theme, let me know (though the general steps are the same).


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    March 14, 2014 at 12:45 pm #94890
    krystyn
    Participant

    This is just what I was looking for. Thanks @nutsandbolts. Quick question...I can't figure out why my footer background width doesn't appear to fill the screen (at least on an iphone). Any suggestions? The width seems to come from the inner, so it should also be 1150px, but it's not?

    March 14, 2014 at 12:48 pm #94891
    nutsandbolts
    Member

    Can you post a link to your site? It's always easier to help if we can see what you see.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    March 14, 2014 at 12:49 pm #94892
    krystyn
    Participant

    Whoops @nutsandbolts..I copied, but failed to paste! http://www.krizzydesigns-test.com/test1/

    March 14, 2014 at 12:51 pm #94894
    nutsandbolts
    Member

    I'm seeing this in your stylesheet:

    .site-inner, .wrap {
    margin: 0 auto;
    /* max-width: 1150px; */
    width: 1150px;
    /* max-width: 1140px; */
    }

    Instead of commenting out those lines, remove them completely. Commenting out doesn't always work.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    March 14, 2014 at 12:56 pm #94898
    krystyn
    Participant

    @nutsandbolts, I removed the lines and it still looks the same. Hmmm...any other ideas?

    March 14, 2014 at 12:59 pm #94900
    nutsandbolts
    Member

    Try changing it to width: 100%; and see if that fixes it. If it doesn't, leave it there for a second and I'll look at it again.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    March 14, 2014 at 1:01 pm #94901
    krystyn
    Participant

    Well, that sort of fixes the footer issue, but takes the inner to full-width and drops the sidebar down and the footers are all mis-aligned.

    March 14, 2014 at 1:03 pm #94902
    nutsandbolts
    Member

    Okay, change that back and try adding this:

    .site-footer .wrap {
            width: 100%;
    }

    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    March 14, 2014 at 1:07 pm #94903
    krystyn
    Participant

    That didn't work either. I also tried width:1150px, too just to see and that didn't work, either.

    March 14, 2014 at 1:11 pm #94904
    nutsandbolts
    Member

    Okay, I think I found it. Put a width of 1150px on .footer-widgets and that should get it working.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    March 14, 2014 at 1:15 pm #94906
    krystyn
    Participant

    Hmm...

    Okay, we are getting closer.

    I actually had to add

    margin: 0 auto; (so that it was centered)
    width:1150px;

    to .footer-widgets

    but, before this, the footer was full-width on non-mobile and of course, now this makes it only 1150px.

    March 14, 2014 at 3:06 pm #94926
    krystyn
    Participant

    Forgot to tag you @nutsandbolts

    March 15, 2014 at 10:45 am #95028
    nutsandbolts
    Member

    Okay, try this...

    On .footer-widgets where you have the width of 1150px, change that rule to this:

    width: 100% !important;

    Then change the width on .site-footer to 100% as well.

    It's hard to tell whether that will work on mobile but it seems to fix the widths in the browser at least.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    March 15, 2014 at 11:05 am #95040
    krystyn
    Participant

    I figured it out. I had to add a .wrap.

    This seems to work:

    .footer-widgets {
    	background-color: #f5f5f5;
    	clear: both;
    }
    
    .footer-widgets .wrap {
    background-color: #f5f5f5;
    	clear: both;
    	padding: 20px 0 10px;
    	padding: 2rem 0 1rem;
    width:1150px;
    margin: 0 auto;
    }
    March 15, 2014 at 11:06 am #95041
    nutsandbolts
    Member

    Awesome! Glad you got it resolved. 🙂


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    March 15, 2014 at 11:07 am #95042
    krystyn
    Participant

    Thanks for your help. I also had to use the same idea on before-header and site-footer just in case anybody else is looking.

    Onto problems 3-6...or something like that!

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The forum ‘General Discussion’ 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