0

//Here i have 2 divs i want div1 to be displayed on the screen before 567px but after 567px screen size i want div2 to get displayed instaed of div1

//this my div1 which should be displayed above 567px screen size

 <table style="width:100%">
    <thead>
        <tr class="header">
      <th>PARAMETERS </th>
      <th>Scio </th>
      <th>Path Lab</th>
      <th>Fitness Apps</th>
      <th>Insurance Co’s</th>
      <th>Teleconsultant App</th>
        </tr>
    </thead>
    <tbody>
    <tr>
      <td>Annual Blood Test </td>
      <td><img src="/static/success.png"></td>
      <td><img src="/static/success.png"></td>
      <td></td>
      <td><img src="/static/success.png"></td>
      <td></td>
   </tr>
    <tr>

//this is my div2 which i want to get displlayed instead of div but only for the screen sizes less and equal to 567px

<div class="card-container">
  <div class="table-cards">
    <div class= "card1">
      <div class="rows head-row">
        <div>Annual Blood Test </div>
      </div>
      <div class="rows">
        <div>Scio</div>
        <div><img src="/static/success.png"></div>
      </div>
      <div class="rows">
        <div>Path Labs</div>
        <div><img src="/static/success.png"></div>
      </div>
      <div class="rows">
        <div>Fitness Apps</div>
        <div></div>
      </div>
      <div class="rows">
        <div>Insurance Co's</div>
        <div><img src="/static/success.png"></div>
      </div>
      <div class="rows">
      <div>Teleconsultant App</div>
      <div></div>
      </div>
    </div>
  </div>

please help me with this and let me know the most easier way of doing it

user9563422
  • 25
  • 1
  • 8

1 Answers1

2

With css you can do a media query and hide the div you want, your css will be something like this:

div2{ display: none }
div1{ display: block}

@media (max-width: 567px){
  div2{ display: block }
  div1{ display: none }
}
Hiogo Cavalheiro
  • 36
  • 2
  • adding display block to the whole div1 which in my case is a "table" makes the table take half of the full width of the screen but i want the table to take up 100% width please help me with this issue??? – user9563422 Apr 04 '18 at 06:02