Question 242978 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to make a website responsive over screen sizes?

My question might have been answered several times before. But, none of them has so far cleared some of my doubts that I have mentioned forward:

Consider that I have a webpage, that shows three rows when the screen-size is more than 700px:

<table id='table_1'>
       <tr>
           <td>Apple</td>
           <td>Pineapple</td>
           <td>Palm</td>
       </tr>
</table>

Now, when my screen-size is less than 700px, three rows create each of the rows a bit shorter and less wider, for which I intended to create a table with three columns instead with the same content in each of the rows, that lead to:

<table id='table_2'>
       <tr><td>Apple</td></tr>
       <tr><td>Pineapple</td></tr>
       <tr><td>Palm</td></tr>
</table>

So, what I next did is, I added some jQuery script to my file as this:

var w = $(window).width();
if(w<700){
        
document.getElementById('table_1').style.display='none';
document.getElementById('table_2').style.display='block';
}

else {

        document.getElementById('table_1').style.display='none';
        document.getElementById('table_2').style.display='block';
        
}

But, surprisingly, it didn’t work. Later, I moved to CSS media queries, which lead to:

@media screen and (min-width:600px) {
#footer1{display:'none';}
#footer2{display:'block';}
}

What actually happens is:
When I open my site in a browser, if the browser window at that time has a width more than 700px, it shows table_1. But later on, when it is customized by me, dragging the window and creating a smaller one with a width much less than 600px, the same table is still in display, whereas table_2 was supposed to be shown. But, that does not seem responsive at all to me. What’s wrong?

Edit: I removed the function checkstatus() as everyone was saying. Moreover, I added these code snippet in my script tag of the main document. Any further edit or help would be appreciated.

Tags:

2

Answers


  1. 0

    Try this.

    #footer1{display: none;}
#footer2{display: block;}
@media screen and (max-width:600px) {
    #footer1{display: block;}
    #footer2{display: none;}
}

    One thing you’re missing is that, table for display: block is not suit. display: table would be right

    Login or Signup to reply.
  2. 0

    We can achieve web pages responsive by using css media queries only. Here you don’t have to use javascript code to achieve this.

    Try to add below css code to your project and see. Don’t forget to put meta tag

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style>
      #table_1
      {
        display:none;
      }     
      @media (max-width:700px)
      {
         #table_1
          {
            display:block;
          }
          #table_2
          {
            display:none;
          }
      }
      @media (min-width:701px) and   (max-width:1400px)
      {
         #table_1
          {
            display:none;
          }
          #table_2
          {
            display:block;
          }
      }
</style>

    /*
    You may also use below screen sizes as per your requirement like

    // X-Small devices (portrait phones, less than 576px)

    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { … }

    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { … }

    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { … }

    // X-Large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { … }

    // XX-Large devices (larger desktops, 1400px and up)
    @media (min-width: 1400px) { … }

    */

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search