html - media query for phone works but not tablet

Question

I am using media query in my css and I was able to adjust it to look good on mobile on the page I'm working on, but the tablet keeps the font the same size and doesn't adjust like I want. How can I have one single media query that adjusts both for tablet AND phone?

<style>
 
  .kppr
  {
    margin-top: -8%;
    margin-left: 8%;
  }
  .kppr p
  {
    color: #89d4e8;
    font-size: 400%;
    font-weight: bold;
  }
  
  @media only screen and (max-width: 700px){
  	.kppr
    {
      margin-top: -15%;
    }
    
    .kppr p
    {
      font-size: 125%;
    }
    
    .kppr img
    {
      width: 4%;
      margin-left: 2%;
    }
  }
  
</style>

<div style="position: relative; top: 0; left: 0;" class="kppr">
  <p>
    kids play &nbsp&nbsp&nbsp&nbspparents relax
  </p>
  
  <img style="position: absolute; top: 49%; left: 35.5%;" class="heart"     src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5759e5882b8ddea12fed577b/1465509256880/STL-Home-Heart.png" alt="Kids play, parents relax"/>
</div>

Answer 1

@media only screen and (max-width: 1023px)

use this media. considering iPad, it's viewport width is 768px in Portrait and 1024px in Landscape, so let's consider tablet as below 1024px. or you can also use 980px and landscape orientation