Solved

CSS for Mobile Device/iPad

Posted on 2016-08-07
13
75 Views
Last Modified: 2016-10-01
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
0
Comment
Question by:slegy
  • 7
  • 3
  • 3
13 Comments
 

Author Comment

by:slegy
ID: 41746428
Shud have included other CSS file.
style2.css
0
 
LVL 41

Expert Comment

by:Jackie Man
ID: 41746634
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
 
LVL 21

Accepted Solution

by:
Kim Walker earned 250 total points
ID: 41746635
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
 

Author Comment

by:slegy
ID: 41753130
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
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41753380
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
 

Author Comment

by:slegy
ID: 41755125
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 21

Expert Comment

by:Kim Walker
ID: 41755176
What version of iOS and which generation iPad are you using?
0
 

Author Comment

by:slegy
ID: 41755461
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
 
LVL 41

Expert Comment

by:Jackie Man
ID: 41755462
MC955LL/a means iPad 2 and its screen resolutions is 1024 x 768.
0
 

Author Comment

by:slegy
ID: 41763722
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
 

Author Comment

by:slegy
ID: 41763873
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
 

Author Comment

by:slegy
ID: 41798763
Sorry, thought this question had been abandoned. All the CSS issues had not been resolved. What next?
0
 
LVL 41

Assisted Solution

by:Jackie Man
Jackie Man earned 250 total points
ID: 41799020
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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
2 CSS questions 11 35
css, html 6 31
Re-position sub-options beneath the TAB 7 42
Making calls on Wi-Fi 5 20
Short answer to this question: there is no effective WiFi manager in iOS devices as seen in Windows WiFi or Macbook OSx WiFi management, but this article will try and provide some amicable solutions to better suite your needs.
What is Backup? Backup software creates one or more copies of the data on your digital devices in case your original data is lost or damaged. Different backup solutions protect different kinds of data and different combinations of devices. For e…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now