How to apply media query? - html

Question

I have created a site using HTML and CSS. The site is currently not responsive and I need to change into a responsive one. I have used media queries but it doesn't seem to be working. Are there any mistakes in my code? I have applied media queries to the entire CSS. Should I apply media query to the entire CSS or only a particular part of the CSS?
I tried using the media query #media screen and (max-width: 300px) { } and it works when resizing the browser but after that when the browser is maximized again the desktop style is not getting applied.
#media screen and (max-width: 300px) {
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0;
/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center;
}
.thrColElsHdr #container {
width: 800px;
background: #FFFFFF;
margin: 0 auto;
/* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left;
/* this overrides the text-align:
center on the body element. */
margin-bottom: 0px;
}
.thrColElsHdr #header {
background: #DDDDDD;
padding: 0 10px;
/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead
of text, you may want to remove the padding. */
background-image: url(images/top.png);
height: 160px;
}
#top_menu {
color: #e5e491;
font-size: 15px;
text-decoration: none;
height: -20px;
width: auto;
float: right;
margin: 90px 0 -50px 0;
}
#top_login {
color: #e5e491;
font-size: 10px;
text-decoration: none;
float: right;
text-align: right;
margin: 0px 0 0px 0;
width: 600px;
height: 30px;
position: relative;
top: -160px;
}
.thrColElsHdr #header h1 {
margin: 0;
/* zeroing the margin of the last element in
the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0px 0;
/* using padding instead of margin will allow you to
keep the element away from the edges of the div */
color: #FFF;
font-family: "Times New Roman", Times, serif;
height: 160px;
}
.thrColElsHdr #sidebar1 {
float: left;
width: 16em;
/* since this element is floated, a width must be given */
background: #75b808;
/* top and bottom padding create visual space within this div */
margin: 15px 10px 15px 15px;
background-image: url(images/news_top.png);
background-repeat: no-repeat;
padding: 15px 2px 2px 2px;
font-size: 10px;
}
.thrColElsHdr #sidebar2 {
float: right;
width: 17em;
/* since this element is floated, a width must be given */
background: #EBEBEB;
/* the background color will be displayed for the length of the content in the column, but no further */
padding: 10px 0;
/* top and bottom padding create visual
space within this div */
border: #0a4b67;
border-width: thick;
margin: 5px;
font-size: 10px;
}
.thrColElsHdr #sidebar1 h3,
.thrColElsHdr #sidebar1 p,
.thrColElsHdr #sidebar2 p,
.thrColElsHdr #sidebar2 h3 {
margin-left: 10px;
/* the left and right margin
should be given to every element that will be placed in the side columns */
margin-right: 10px;
}
.thrColElsHdr #mainContent {
margin: 0 12em 0 1em;
/* the right margin can be given in ems or pixels. It creates the space down the right side of the page.
*/
color: #0a4b67;
}
.thrColElsHdr #mainContent h2 h3 h4 {
color: #0a4b67;
}
.thrColElsHdr #footer {
padding: 0 10px;
/* this padding matches the left alignment of the elements in the divs that appear above it. */
background: #E1E994;
}
.thrColElsHdr #line {
padding: 0 10px;
/* this padding matches the left alignment of the elements in the divs that appear above it. */
background: #E1E994;
margin-top: 0px;
}
.thrColElsHdr #footer p {
margin: 0;
/* zeroing the margins of the first element in the footer will
avoid the possibility of margin collapse - a space between divs */
padding: 10px 0;
/* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
/* Miscellaneous classes for reuse */
.fltrt {
/* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft {
/* this class can be used to float an element left in your
page */
float: left;
margin-right: 8px;
}
.clearfloat {
/* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
.thrColElsHdr #container #header #top_menu_logo {
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 0em;
float: left;
}
.thrColElsHdr #container #header #top_menu a {
color: #e5e491;
}
.thrColElsHdr #container #subheading {
font-size: 14px;
height: 211px;
}
div#nifty {
font-size: 12px;
background: #2d6482;
width: 300px;
}
div.rounded div {
height: 1px;
overflow: hidden;
}
#radiusx,
#radiusy {
text-align: right;
width: 20px;
}
div#nifty p {
color: #dfe791;
padding: 2px;
margin: 2px;
}
#thetext {
float: right;
width: 380px;
padding: 10px;
font-size: 12px;
font-weight: bold;
}
#theimg {
float: left;
width: 400px;
}
}
</style>
please any idea any mistake please comment my question ?

Answer 1

The way to do media queries is this:
/* rules that apply regardless of resolution */
.some > .css > .selector {
display: block;
background-color: rgb(255, 255, 255);
}
#media screen and (min-width: 1440px) {
/* rules that apply for screens >= 1440px */
.some > .css > .selector {
width: 1280px;
color: rgb(144, 144, 144);
}
}
#media screen and (min-width: 1024px) and (max-width: 1439px) {
/* rules that apply for screens 1024px - 1439px */
.some > .css > .selector {
width: 920px;
color: rgb(102, 102, 102);
}
}
#media screen and (min-width: 640px) and (max-width: 1023px) {
/* rules that apply for screens 640px - 1023px */
.some > .css > .selector {
width: 500px;
color: rgb(64, 64, 64);
}
}
#media screen and (max-width: 639px) {
/* rules that apply for screens 639px and below */
.some > .css > .selector {
width: 300px;
color: rgb(0, 0, 0);
}
}
Alter the conditions with your desired breakpoints, of course.
As a guideline, always apply your media queries after your style for that element / logical section of elements. This makes it convenient later on to find and edit your styles for a particular element across all resolutions.
A few things to note for first-timers:
ensure that you use px values that don't overlap in the media queries.
the rules within media queries will "overwrite" those outside of it.

Answer 2

You should do a link tag for the css and have this meta tag
and your
#media screen and (max-width: 300px) {}
does not make sense because then you will choose a screen that's smaller than 300px width
#media screen and (min-width: 300px) and (max-width: 460px) {}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>