CODEWITHSUNDEEP
csshtmlmobile
Michael Buckley
Michael Buckley

Reputation: 621

Style for mobile devices

I am trying to make some of my sites more mobile friendly. So I created a new style sheet that reorganises the pages so it is more vertical. When I test it in Firefox's responsive design view, it all looks good. But when I try on a phone it does not work, but just displays the site as normal which is hard to read. I am including the style sheets like this:

<link type="text/css" rel="stylesheet" media="screen and (min-width: 600px)"
      href="/static/themes/pauline/style.css"/>
<link type="text/css" rel="stylesheet" media="handheld, screen and (max-width: 599px)"
      href="/static/themes/pauline/handheld.css"/>

Is there something wrong with my media query if I want this working on an iPhone etc?

Upvotes: 0

Views: 104

Answers (1)

Kundan Sankhe
Kundan Sankhe

Reputation: 224

Add below code into your html page in section.

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

It will render that page with width of its own screen.

Upvotes: 1

Related Questions