Community Forums › Forums › Archived Forums › Design Tips and Tricks › Education Theme – Responsive design not workin on iPhone or smartphones
Tagged: css
- This topic has 10 replies, 3 voices, and was last updated 10 years, 5 months ago by
Riavon.
-
AuthorPosts
-
December 21, 2012 at 11:38 am #6691
dwzemens
MemberI'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 + WordPressDecember 21, 2012 at 2:15 pm #6723Ozzy
Memberon or near line 751, you have
#inner .wrap {
margin: 0 auto;
width: 1140px;
}change the width: 1140px; to max-width: 1140px;
hope that helps!
December 21, 2012 at 2:23 pm #6729Ozzy
MemberDecember 21, 2012 at 3:20 pm #6747Riavon
MemberThe 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 #6755dwzemens
MemberThanks 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 + WordPressDecember 21, 2012 at 3:42 pm #6760Riavon
MemberGive it a shot. 🙂
Twitter: @riavonentprises
December 21, 2012 at 3:53 pm #6767dwzemens
MemberI gave it a shot, and it wasn't the solution! But thanks for the effort!
1955Design
Web + WordPressDecember 21, 2012 at 4:13 pm #6774Riavon
MemberOk, 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 #6787dwzemens
MemberThanks 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 + WordPressDecember 21, 2012 at 4:36 pm #6793Riavon
MemberUgh! Weird. And, frustrating!
Twitter: @riavonentprises
December 22, 2012 at 7:22 am #6912Riavon
MemberTry 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.