Using media queries

Hi, I am a newby at mobile sites and a customer of mine wants a mobile site using the same domain name.
My problem is, can I create a new site for mobile within the existing site, and what code would I need to
establish what device is enquiring.

Hi muffin69. Welcome to SitePoint. :slight_smile:

Since you have mentioned media queries, if you are going that route you don’t need a separate site. You just serve up different CSS styles for narrower devices. These @media rules only work on some mobile devices, though, such as iPad and some smartphones.

There is a trend now towards "responsive design". Another take on it is the theory that you should [URL=“”]design for mobiles first.

Serving up the same site for mobile and desktop isn’t always practical, though—particularly on gigantic sites.

Hi Ralph.m and many thanks for your response. My situation is that the site has just been revamped using a fixed width and I am reluctant to do it again with a flexible design. My customer also wants to use the same domain name for both sites. My thinking is media queries will interrogate the incoming browser and find out what size of device it is, but it seems that media queries will only route to a suitable style sheet.
My html page I deem to be unusable and so I will have to make a separate file for a mobile version. I assume this would be ok as it would live in its own folder within the main site folder. (my current index page lives on the root of the site) Is this practical or should I just add a ‘button’ to the original site index page saying ‘Mobile Site’.

You may be able to leave the desktop version of the site as is and just style everything differently for smaller devices with the @media rule—either in a separate style sheet or within the original style sheet itself. I prefer to do it in the original style sheet itself. Here is some code for doing that:

I’m not too keen on having a button linking to a different page, personally.

Hi ralph.m
again thanks for your reply. I lean toward making a separate site for mobile but within the original site folder and its own style sheet.
All I need is the code to interrogate the incoming browser.