-2

I am trying to call media queries through document.ready method. Here my aim is to call a media query after HTML content got loaded. Can anyone help? On this.

Example:

@media only screen and (min-width: 1200px){
  .main_container {
    width: 1200px;
  }
}
Nani
  • 7
  • 2
  • 1
    This is not jQuery, it is CSS code. Try posting your current HTML code and we might be able to help you. Also, the rest of relevant CSS. – avia Nov 23 '21 at 06:50
  • Does this answer your question? [Is there a javascript equivalent to using @media query?](https://stackoverflow.com/questions/31511001/is-there-a-javascript-equivalent-to-using-media-query) – Fabian S. Nov 23 '21 at 06:51
  • @FabianS. I think Nani is rather confused and is trying to apply responsive stylings using media queries. – avia Nov 23 '21 at 06:53

1 Answers1

0

You can use

$windowWidth = $(window).width();

This will give you size of the current screen. Then use conditions to add your css

    if ($windowWidth >= 1200) {
        $('.main_container').css('width', '1200px');
    } else {
        $('.main_container').css('width', 'auto');
    }
tacqiya
  • 60
  • 8
  • Its working fine. I have one more doubt If width >= 1200 I am using the above code, but if Width is less than 1200 Its not removing Applied CSS. – Nani Nov 23 '21 at 07:48
  • @Nani I have updated the answer, use an else condition for lower screens – tacqiya Nov 23 '21 at 08:04
  • I have already mentioned main_container width 1000px by default on CSS file. After applying your code its working fine to me for >= 1200px. But when screen size decreased its not applied default class name style. – Nani Nov 23 '21 at 08:07
  • @Nani This will work only after you refresh the page, $(window).width() will take width of your current screen. if you adjusting the screen size by dragging the responsive in inspect elements I don't think it will show correctly. If you want to do like that, you need to add some calculations to reduce the div size based on changing the screen width. – tacqiya Nov 23 '21 at 08:41