Skip navigation

Dreamweaver CC

Currently Being Moderated

Mobile version won't load

Aug 29, 2012 7:59 PM

Hi guys!

I'm trying my hand at making a mobile version of my web page, but I'm having a hard time getting it to do two things:

I want the mobile web page to load on phones.
I want to eliminate horizontal scrolling on the mobile version.

You can see my index page at heyhector.com.

My mobile version is at heyhector.com/mobile. (links are't working there yet)

If you could clear up why I couldn't get it to work I'd be so happy.

372 Views 3 Replies Latest reply: Rik Ramsay, Sep 4, 2012 4:46 PM

Replies

Currently Being Moderated

1. David_Powers,

Aug 30, 2012 1:41 AM in reply to MagicToaster

Report

In your mobile page you have this in the head:

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

There's a space between max-device and width. it should be max-device-width.

For mobile, you should also have the following in the head of the page:

<meta name="viewport" content="width=device-width">

|
Mark as:
Currently Being Moderated

2. MagicToaster,

Sep 4, 2012 3:15 PM in reply to David_Powers

Report

Hey, David!

Thanks for the quick reply. I tried this, and it fixed the horizontal scrolling on my page, but I still can't get it to switch automatically to the mobile layout when I visit on a smart phone.

|
Mark as:
Currently Being Moderated

3. Rik Ramsay,

Sep 4, 2012 4:46 PM in reply to MagicToaster

Report

You would need some form of script to redirect the user to your mobile version of the site. Something like the below could be the solution.
<script type="text/javascript">

</script>

As taken from here: http://css-tricks.com/snippets/javascript/redirect-mobile-devices/

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points