Education Theme – Responsive design not workin on iPhone or smartphones

[dwzemens]

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

[Ozzy]

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+

[Ozzy]

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

---

Ozzy Rodriguez | Twitter | Google+

[Riavon]

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

[dwzemens]

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

[Riavon]

Give it a shot. 🙂

---

Twitter: @riavonentprises

[dwzemens]

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

---

1955Design
Web + WordPress

[Riavon]

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

[dwzemens]

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

[Riavon]

Ugh! Weird. And, frustrating!

---

Twitter: @riavonentprises

[Riavon]

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