Unable to display images through media queries form stylesheet

Posted by kNair on Stack Overflow See other posts from Stack Overflow or by kNair
Published on 2014-06-12T03:22:24Z Indexed on 2014/06/12 3:24 UTC
Read the original article Hit count: 110

Filed under:
|

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;}
}

© Stack Overflow or respective owner

Related posts about html

Related posts about css