CODEWITHSUNDEEP
csshtmlmobileresponsive-designfluid-layout
MSchumacher
MSchumacher

Reputation: 167

My responsive website doesn't look correct on Mobile devices?

I've followed a great tutorial for designing a responsive Navigational menu. When testing the menu on my desktop PC, all looks great. Then as a test, I looked at the website on my mobile - Sony Ericsson Aino (Lame I know) and it looked like the menu couldn't pick up the CSS (style.css). Strange because I've linked my stylesheet properly. I'm not sure if it's my phone but can anyone see what I've done wrong here? Go to www.testing123.co.za . Problem is that I don't have any tablets, androids or other mobile devices to view the site on, so I don't know if the website (menu) is working on those devices.

Do you need me to copy the CSS in here? Otherwise you can always source code it.

Thanks in advance!

Upvotes: 0

Views: 2658

Answers (2)

tobyj
tobyj

Reputation: 298

The Aino uses NetFront browser 3.5

The CSS/HTML standards that this phone supports are listed here: http://dl-www.sonymobile.com/cws/download/1/708/159/1277364112/DW-88004-dg_web_browser_nf3_r31a.pdf [see page 12]

I suggest you start with some very basic CSS and test, then keep adding to your stylesheet until it doesn't work.

Note: Older NetFront Browsers (below version 3.5) will ignore the rest of the stylesheet after a media query.

On another note, your stylesheet has the media queries listed from largest to smallest. From a mobile-first perspective you should reverse these, so the smallest is first.

Upvotes: 1

JoeJ
JoeJ

Reputation: 940

You're using the HTML5 nav element with a XHTML 1.0 DOCTYPE. Change:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

to

<!DOCTYPE html>
<html>

Upvotes: 0

Related Questions