How do I make my site work on cellphones?

[Jaxel]

I know how responsive design works... this page works on responsive design:
http://8wayrun.com/streams/?view=detailed

When I view it on my cellphone, it looks as follows:


So I am making a new page at:
http://8wayrun.tv/

If you resize it in your browser, you will see that its responsive. But when I view it on my cellphone, it looks like this:


It appears that the browser is not dropping below a minimum width. How do I fix this?

 

[Martok]

Going by the colour of your browser, would that be Dolphin browser for Android?

If so, there seem to be issues with that browser and some aspects of responsive design.

 

[Jaxel]

Going by the colour of your browser, would that be Dolphin browser for Android?

If so, there seem to be issues with that browser and some aspects of responsive design.

Same thing happens in Chrome for Android.

 

[HittingSmoke]

How did you build the responsive design on that page? Are you attempting to do any user agent sniffing?

Emulating any mobile device in the Chrome dev tools breaks the page. It looks like it's not getting the viewport information from mobile devices.

EDIT: You're missing the viewport meta tag in your header:

<metaname="viewport"content="width=device-width, initial-scale=1.0">

 

[Jaxel]

EDIT: You're missing the viewport meta tag in your header:

<metaname="viewport"content="width=device-width, initial-scale=1.0">

Thanks, thats all I needed.

 

[seojoseph]

You could also check out https://chrome.google.com/webstore/detail/resizer/gekhbemhcekbaodnijabeajoeolfplbp?hl=en-US&gl=US which is pretty cool!

 

[HittingSmoke]

You could also check out https://chrome.google.com/webstore/detail/resizer/gekhbemhcekbaodnijabeajoeolfplbp?hl=en-US&gl=US which is pretty cool!

I don't understand who could possibly need this, especially for Chrome. Chrome's tools are even more powerful than this extension.

Just press F12, click the drawer icon, then click the emulate tab. It has a list of devices with various screen sizes and DPIs.

 

[TPerry]

Just press F12, click the drawer icon, then click the emulate tab. It has a list of devices with various screen sizes and DPIs.

Did that and my whole screen slid to the right and I got my calculator, weather radar and a bunch of other goodies show up.... of course, I'm on a Mac.

 

[HittingSmoke]

Did that and my whole screen slid to the right and I got my calculator, weather radar and a bunch of other goodies show up.... of course, I'm on a Mac.

Using the same browser on a different platform won't affect the visual rendering of the page. They all use the same rendering engine. It sounds like you've got something wrong with the responsiveness of your template.

 

[TPerry]

Using the same browser on a different platform won't affect the visual rendering of the page. They all use the same rendering engine. It sounds like you've got something wrong with the responsiveness of your template.

My point was... F12 is a main OS function for OS/X Mavericks..
I'm not sure what the key combo that would correspond to OS/X would be - will have to look it up.