How to write HTML page code for various device types?

Issue

I have a three-column website that is coded as a single column (responsive) up to 767 px. I want to set a 3 column view beginning for devices from (including) 768px.

I already have this working partially, but I need a smaller font size for devices beginning from 768 px.

Currently I have the following HTML code:

@media screen and (max-width: 767px) { 
.wrap { 
display: block; 
} 
.tc { 
display: block; 
width: auto; 
border: none; 
} 

And other HTML code within this code.

The above makes a single column display for devices up to 767px.

I want to know what to write for viewport sizes above 767px which then starts with the Apple iPad, which is 768px default portrait size, and then higher px? I already have following code for max-width declared to up to 1240px.

What is the HTML/CSS code for devices 768px and above?

Solution

You can use a media query with min-width instead like this:

@media screen and (min-width: 768px) { 
    // your css here
} 

Answered By - AndrewL64