-1

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>
Ben
  • 58
  • 7
  • 2
    Maybe you should change the `max-width` so it works for tablet too???? – putvande Jun 10 '16 at 13:03
  • What is the max width of your tablet? If you are using Google Chrome, the n I find the Multiple device preview in developer console to be very helpful for such testing purposes. Learn more [here](https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/?hl=en) – anshabhi Jun 10 '16 at 13:17

2 Answers2

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

I'm going to guess that, as you are testing, the tablet you're testing on has a screen width which is greater than 700px?

See these tips on breakpoints in a previously asked/answered question

Community
  • 1
  • 1
clemdia
  • 136
  • 7
0
@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

Lucian
  • 1,715
  • 3
  • 17
  • 26
  • That did it! I really appreciate it. I really want to read up more on media queries and use them more. Responsive web design is essential. So thanks again! – Ben Jun 10 '16 at 13:35