CSS Media queries adjust to screen width in asp.net

I have two html tables in my Asp.net project, first one has normal html and 2nd one has a Repeater control. Due to some recent changes, it was difficult to align the width of the two tables. Also, I was facing issue on 2 different resolutions as below:

  1. 1920×1080 on my laptop.
  2. 1366×768 on my Desktop.

To solve this, I used the css media queries to cater to minimum width resolution of 1400px for MyTable and for above 1400px width resolution for OthersTable as shown below:

@media only screen and (max-width: 1400px) {
    .MyTable {
        width: 92%;
    }

    .OthersTable {
        width: 90%;
    }
}

@media only screen and (min-width: 1400px) {
    .MyTable {
        width: 90%;
    }

    .OthersTable {
        width: 90%;
    }
}

Media queries introduced in CSS3 let you include some properties only if certain condition is met. In the above case, I’m using screen-width as the condition. Below I’m using the class in my html tables as defined in the media queries in the aspx code.

<table id="divMyTable" visible="false" style="border-collapse: collapse;" class="MyTable" runat="server">
	<tr><td></td></tr>
</table/>			

<table id="divOthersTable" visible="false" style="border-collapse: collapse;" class="OthersTable" runat="server">
	<tr>
		<td></td>
	</tr>
</table>

Show image when mouse over on radio button HTML CSS

This post shows the scenario where you need to show an image when doing a mouse-over on a radio button in html. You can customize the code further as per your requirement.

In your html or server side code file, add the below style under the head tags:

<style>
    span .hover-img { 
      position:relative;
    }
    span .hover-img span {
      position:absolute; left:-9999px; top:-9999px; z-index:9999;
    }
    span:hover .hover-img span { 
      top: 20px; 
      left:0;
    }
</style>

Add the below html code under the body tag of the file as below:

<span><div class="hover-img"><font face="Arial"><input type="radio" value="option1" name="myradio"><font size="2">Option 1
</font><span><img src="Mouseover1.png" alt="image" height="100" /></span></div></span><br />

<span><div class="hover-img"><font face="Arial"><input type="radio" value="option2" name="myradio"><font size="2">Option 2
</font><span><img src="Mouseover2.png" alt="image" /></span></div></span>

Run the final code in a browser to see the results.