How to apply media query?

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"/>