Media Queries
Permalink
Guys,
I've been asked to do a site which uses Media Queries to display a separate Mobile CSS when the site is veiwed in a phone.
Reading around I have to insert a new CSS link line into the page header like this one:
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="mobile_480max_width.css" />
My problem is that when we change a HTML page to a theme in C5 we have to follow the following instructions:
=============
7. Find every relative URL reference in the code and add this Get ThemePath code to tell C5 where to find all of the necessary image, css, and other necessary files.
The old line:
<link href="style.css" rel="stylesheet" type="text/css" />
should now look like
<link href="<?=$this->getThemePath()?>/style.css" rel="stylesheet" type="text/css" />
==============
I have re created the new Media Query line to take this into account:
<link href="<?=$this->getThemePath()?>/mobile_480max_width.css" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />
My problems is my phone still renders the page using the usual CSS.
Have I got the mobile CSS link correct??
Ian
I've been asked to do a site which uses Media Queries to display a separate Mobile CSS when the site is veiwed in a phone.
Reading around I have to insert a new CSS link line into the page header like this one:
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="mobile_480max_width.css" />
My problem is that when we change a HTML page to a theme in C5 we have to follow the following instructions:
=============
7. Find every relative URL reference in the code and add this Get ThemePath code to tell C5 where to find all of the necessary image, css, and other necessary files.
The old line:
<link href="style.css" rel="stylesheet" type="text/css" />
should now look like
<link href="<?=$this->getThemePath()?>/style.css" rel="stylesheet" type="text/css" />
==============
I have re created the new Media Query line to take this into account:
<link href="<?=$this->getThemePath()?>/mobile_480max_width.css" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />
My problems is my phone still renders the page using the usual CSS.
Have I got the mobile CSS link correct??
Ian