After reading an interesting article at , I have been experimenting with different ideas. One of my goals is to dynamically load a specific CSS file based on the device size accessing my website.
Below is the code that I am currently using:
<link href="<?php echo base_url()?>assets/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="<?php echo base_url()?>assets/css/rh-mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1280px)" href="<?php echo base_url()?>assets/css/rh.css" />
In both the 'rh' and 'rh-mobile' CSS files, I have defined the following class:
.hero-unit {
background: url("../img/ipod5.jpg");
height: 4em;
width: 15em;
padding: 0.5em;
margin-bottom: 2em;
background-color: #eeeeee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
The main difference between the two CSS files is the image being used. The mobile version displays 'ipod5.jpg' while the desktop version uses another image.
However, during testing in Firefox, I have noticed that neither CSS file is being loaded except for 'bootstrap.css'. Can someone help me identify what might be the issue here?