• 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

Education Theme – Responsive design not workin on iPhone or smartphones

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 › Education Theme – Responsive design not workin on iPhone or smartphones

This topic is: not resolved

Tagged: css

  • This topic has 10 replies, 3 voices, and was last updated 10 years, 1 month ago by Riavon.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 21, 2012 at 11:38 am #6691
    dwzemens
    Member

    I've modified the Education theme and here's the URL to my testing website:

    http://1955design.com/malachy/

    The problem I have is that during development I've tested the site CSS/HTML using various browser screen resolutions and the site scales fine and looks good at the various screen sizes.  However, when viewing from my iPhone or SmartPhone the site does not scale properly nor display as it does on the browser screen test sites.  I'd be curious if anyone can take a look at the site with a hand held device, tell me how bad it looks, and offer suggestions as to what I've done wrong to have the site fail to be properly recognized by the iPhone or other hand held devices.  Thanks!


    1955Design
    Web + WordPress

    December 21, 2012 at 2:15 pm #6723
    Ozzy
    Member

    on or near line 751, you have

    #inner .wrap {
    margin: 0 auto;
    width: 1140px;
    }

    change the width: 1140px; to max-width: 1140px;

    hope that helps!


    Ozzy Rodriguez | Twitter | Google+

    December 21, 2012 at 2:23 pm #6729
    Ozzy
    Member

    nevermind... that doesn't fix it. i'll keep looking


    Ozzy Rodriguez | Twitter | Google+

    December 21, 2012 at 3:20 pm #6747
    Riavon
    Member

    The problem is with your #inner .wrap so try this:

    #inner .wrap {

    margin: 0 auto;
    max-width: 1140px;
    min-width: 380px;
    width: 100%;

    }


    Twitter: @riavonentprises

    December 21, 2012 at 3:35 pm #6755
    dwzemens
    Member

    Thanks for the suggestion.  I don't think the problem is that simple because I use several  "@media only screen"  CSS markup rules to control the layout on various width devices.


    1955Design
    Web + WordPress

    December 21, 2012 at 3:42 pm #6760
    Riavon
    Member

    Give it a shot. 🙂


    Twitter: @riavonentprises

    December 21, 2012 at 3:53 pm #6767
    dwzemens
    Member

    I gave it a shot, and it wasn't the solution!  But thanks for the effort!


    1955Design
    Web + WordPress

    December 21, 2012 at 4:13 pm #6774
    Riavon
    Member

    Ok, well the only other thing I can suggest to you is to go through all of your @media styles and make adjustments. I tested your site for the iPhone on Offermobi and it rendered nicely according to their test. I wish you all the best of luck. And, if I think of anything else, I'll be sure to post it here for you. Sorry I couldn't help you!


    Twitter: @riavonentprises

    December 21, 2012 at 4:30 pm #6787
    dwzemens
    Member

    Thanks again.  It's weird because when I view the iPhone display via Offermobi it looks great, just like I'd expect, but when viewing it directly via my iPhone it's not scaled down and it's also cut off width-wise.


    1955Design
    Web + WordPress

    December 21, 2012 at 4:36 pm #6793
    Riavon
    Member

    Ugh! Weird. And, frustrating!


    Twitter: @riavonentprises

    December 22, 2012 at 7:22 am #6912
    Riavon
    Member

    Try to declare your widths in your @media calls as percentages rather than fixed widths. For example, rather than:


    @media
    only screen and (max-width: 320px) {
    ul.menu-primary {
    max-width: 270px;
    }

    Try instead:


    @media
    only screen and (max-width: 320px) {
    ul.menu-primary {
    width: 98%;
    }

    You may need to make adjustments to the actual percentage amount once you test it on your iphone, such as 99%, or perhaps it looks better at 95%, but if you declare this rule as a percentage rather than as a fixed width, I have a feeling it will render better for you on the smartphone. Again... without my having any direct access to the device, this is something I simply suggest you give it a shot. 🙂 Let me know.


    Twitter: @riavonentprises

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