Media Query For Phone Works But Not Tablet

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

Solution 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

Solution 2:

@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