i have used on my site Width and height like
<table width="800px" height="600px" border="0" cellspacing="0" cellpadding="0" class="leftborder"/>
i have to changed this code media query for responsive but its not working i set background color red when i re size my browser its showing color only not in resize content
My code:
<style type="text/css">
@media only screen and (min-width: 320px) and (max-width : 780px)
{
.leftborder
{
background-color:skyblue;
}
.rightborder {
border-right: 1px solid #000000;
}
.leftborder {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-style: thin;
}
.style2 {font-size: xx-small}
.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
}
BODY { font-family: Arial, Helvetica, sans-serif;
line-height:160%;
font-size:14px;
color:#000;
background: url(images/gradient2.jpg);
background-repeat: repeat-x;
background-color:#FFF;
}
table.leftborder{
align:"right";
width:800px ! Important;
height:600px ! Important;
}
}
/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) and (max-width: 780px)
{
.leftborder {
background-color:blue;
}
}
/* SMALL TABLET */
@media only screen and (min-width: 600px) and (max-width:780px)
{
.leftborder
{
background-color:green;
}
}
/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) and (max-width: 780px)
{
.leftborder
{
background-color:yellow;
}
}
.rightborder {
border-right: 1px solid #000000;
}
.leftborder {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-style: thin;
}
.style2 {font-size: xx-small}
.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
}
BODY { font-family: Arial, Helvetica, sans-serif;
line-height:160%;
font-size:14px;
color:#000;
background: url(images/gradient2.jpg);
background-repeat: repeat-x;
background-color:#FFF;
}
</style>
<script type="text/javascript">
function openWindow(winName)
{
window.open(winName,"FAQs", "width=950,height=650,resizable=no,scrollbars=no,toolbar=no,status=no,menubar=no,copyhistory=no,left=100,top=100,screenX=100,location=no,screenY=100");
}
</script>
</head>
<link href="style.css" rel="stylesheet" type="text/css">
<body bgcolor="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0" RIGHTMARGIN="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="design"/ >
<tr>
<td align="center">
<table width="800px" height="600px" border="0" cellspacing="0" cellpadding="0" class="leftborder"/>
<tr bgcolor="#FFFFFF">
<td colspan="2" style="background-image:url('site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right" />
<?php
if(!is_null($sid)&&$session_error=="none")
{
$_SESSION['lms_username']=$lms_username;
?><TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="190" >
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000">Logged in as: <B><?php echo $lms_username; ?></B></TD>
</TR>
<?php
if($lms_groups=="on" && $lms_user_group!=""){
?>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo"$lms_gtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_group</B>";}?></TD>
</TR>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo "$lms_sgtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_subgroup</B>";}?></TD>
</TR>
<tr>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php if($section=="reports" && $report){echo"<A HREF='index.php?section=reports&sid=$sid'>Back to Detailed Reports Section";}?></FONT></TD>
</tr>
<?php }?>
</TABLE>
<?php
}
?></td>
</tr>
<tr>
<td colspan="2" height="20" background="images/bg.gif">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<TD align="right"><?php
if(!is_null($sid)&&$session_error=="none")
{
?><a style="" href="index.php?section=<?php echo $section; ?>&logout=YES&sid=<?php echo $sid; ?>"><img src="images/logout.gif" border="0" align="ABSMIDDLE" alt="Click here to Log Out"></a><?php
}
?></TD>
</tr>
</table></td>
</tr>
<tr>
<?php
if(is_null($sid)||$session_error!="none")
{
$nav_display = 'display: none';
}
?>
<td valign="top" style=" <?php echo $nav_display; ?> ">
<!---------BEGIN SIDE NAV TABLE------------->
<table width="198" border="0" cellspacing="0" cellpadding="0" >
<tr valign="top" bordercolor="#FFFFFF">
<td width="198" bordercolor="#FFFFFF"><?php
if((!is_null($sid)&&$session_error=="none"))
{
include($dir_components."navbar2.php");
}
?></td>
</tr>
<tr><td> </td></tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td class="boxcontent" VALIGN="TOP" >
<?php
include($mysection);
?></td>
</tr>
</table>
</td>
</tr>
</table>
<hr width="200;">
</body>
</html>
added image what i am getting ?please help me any advise ?
On your media queries you have just changed the color and how do you supposed to get responsive design. You need to change other properties like
widthorheightto adjust on that respective screen size. Or there are other options for you, like responsive tables plugins or if you want to fix via media queries you need to first decide how you wanna display on specific screen size, options are like scrollable tables or breaking table headings into blocks and columns below and so on then only you go to media queries to adjust as accordingly.