Education Theme – Responsive design not workin on iPhone or smartphones

Community Forums Forums Design Tips and Tricks Education Theme – Responsive design not workin on iPhone or smartphones

This topic is: not resolved

Tagged: 

This topic contains 10 replies, has 3 voices, and was last updated by  Riavon 1 year, 11 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #6691

    dwzemens
    Participant
    Post count: 5

    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

    #6723

    Ozzy
    Participant
    Post count: 214

    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!


    #6729

    Ozzy
    Participant
    Post count: 214

    nevermind… that doesn’t fix it. i’ll keep looking


    #6747

    Riavon
    Participant
    Post count: 95

    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

    #6755

    dwzemens
    Participant
    Post count: 5

    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

    #6760

    Riavon
    Participant
    Post count: 95

    Give it a shot. :)


    Twitter: @riavonentprises

    #6767

    dwzemens
    Participant
    Post count: 5

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


    1955Design
    Web + WordPress

    #6774

    Riavon
    Participant
    Post count: 95

    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

    #6787

    dwzemens
    Participant
    Post count: 5

    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

    #6793

    Riavon
    Participant
    Post count: 95

    Ugh! Weird. And, frustrating!


    Twitter: @riavonentprises

    #6912

    Riavon
    Participant
    Post count: 95

    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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.