Unable to display images through media queries form stylesheet
- by kNair
I'm trying to create a responsive homepage with max-width of 1024 first. However the images are not displaying when I called from the css file.
I did include the stylesheet inside the home page and the current viewport is 1024.
I can't find my mistake, please help.
Thanks.
homepage
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Responsive design</title>
<link rel="stylesheet" href="res-style.css" type="text/css" media="screen and (max-width:1024px)"/>
</head>
<body>
<table class="ct">
<tr>
<td class="1">
<?php include 'menu.php'; ?>
</td>
</tr>
<tr>
<td class="2">
</td>
</tr>
<tr>
<td class='3'>
<img src="NewLogo1.png"></td>
</tr>
<tr>
<td class='4'>
</td>
</tr>
<tr>
<td class='5'>
wefhuiweabhfuia</td>
</tr>
</table>
</body>
</html>
stylesheet
@charset "utf-8";
/* CSS Document */
@media screen and (max-width:1024px)
{
.ct{min-width:1000px;height:898px;border:0;}
.1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;}
.2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;}
.4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;}
}
