CSS for Mobile Device/iPad

We've put together a small website related to the sale of our home. We would like to make it viewable on all devices. It seems to work fine when viewing it on a large screen but not on the individual devices. In particular, on my phone the header and menu don't stretch the entire width. Website is: mtviewhome.com. CSS is attached.
mtviewhome.css
slegyAsked:
Who is Participating?
 
Kim WalkerConnect With a Mentor Web Programmer/TechnicianCommented:
It looks fine on my phone. But you do have some HTML errors. Please use the HTML Validator to see all your errors. Most are minor, un-closed tags in your X-HTML. For example, all your meta and link tags should end with /> and some do not. But more specifically, there's an unclosed <a> tag in your facebook div that might be causing rendering issues.

There are also errors for all the ampersands in the href and src values within the body element. These should always be replaced with the &amp; entity. But this is insignificant since practically all browsers forgive this error.
0
 
slegyAuthor Commented:
Shud have included other CSS file.
style2.css
0
 
Jackie ManCommented:
You need to put the following code before your content html.

<div id="wrapper">

A lot of sites don't span the full screen length (i.e. fixed width sites), so webmasters use a "wrapper" to set the appropriate width and act as a full screen would.

Source: https://www.sitepoint.com/community/t/why-do-most-developers-put-div-id-wrapper-firstly/4515
0
[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

 
slegyAuthor Commented:
Thank you for your responses. I've done quite a bit more work on this and everything is looking pretty good. And thank you for calling my attention to the HTML errors. Not sure how that happened. Anyway, there is one last puzzling problem. The CSS is supposedly set up for mobile, iPad and large screen. Mobile CSS is working correctly. Large screen is working correctly. But it seems that the formatting for the iPad is being taken from the large screen CSS.  Any changes to that section affect the formatting for the iPad. is the @media min-width: 481 px correct?
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
There seems to be some controversy over the actual device-width of an iPad. It may have changed with some version of IOS. Many reference sites list the iPad at 768 pixels wide while many others list it at 980 pixels wide. The Apple Developer site is one that lists it at 980 pixels wide,.

However, the min-width for desktop screens is often set at 1024 pixels. So a min-width of 1024 should eliminate any problems with iPads.
0
 
slegyAuthor Commented:
I've tried everything you've suggested and that I can think of. I just can't get t to work correctly for the iPad. With the attached CSS, it works perfectly on my Kindle. Not even sure which CSS the iPad is using.
mtviewhome.css
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
What version of iOS and which generation iPad are you using?
0
 
slegyAuthor Commented:
I'm testing with the iPad of the friend I'm putting this together for. Don't know anything about iPads. IOS is 9.3.3. Does model MC955LL/A have any meaning?
0
 
Jackie ManCommented:
MC955LL/a means iPad 2 and its screen resolutions is 1024 x 768.
0
 
slegyAuthor Commented:
OK, I'm back to testing. Since I'm new to this responsive design, I'm going to ask what is probably a stupid question. It appears that separate media entries in the CSS are needed for a variety of different devices. So If it should work on an iPad in both landscape and portrait, entries are needed for 768 and 1024? My monitor is 1920, so it would need a entry as well? This could get insanely complicated!
0
 
slegyAuthor Commented:
Well, I thot I was getting somewhere. With the attached CSS the site works acceptably on my Samsung Note 4 and my Kindle. It works as desired on the iPad 2 in landscape but not at all on the iPad in portrait. The menu is stacked instead of showing "Menu." It is also working correctly on my 1600X1200 and 1920X1200 monitors. Any suggestions as to the problem with iPad portrait?
mtviewhome.css
0
 
slegyAuthor Commented:
Sorry, thought this question had been abandoned. All the CSS issues had not been resolved. What next?
0
 
Jackie ManConnect With a Mentor Commented:
The best practice is to detect browser of the device using JavaScript and have two CSS files, one for Safari and the other for other browser.
0
All Courses

From novice to tech pro — start learning today.