Solved

CSS for Mobile Device/iPad

Posted on 2016-08-07
13
120 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 43

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 22

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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

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 22

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
 
LVL 22

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 43

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 43

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Problem with spacing columns on a row in a table 10 23
Botom of page is wrong color 5 10
Change of column alignment in div 2 18
flex div overflows its container 4 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.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

776 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