Tablet responsiveness help in landing page

[ljakiel]

When I preview my landing page on tablet, rather then folding and stacking content into a single column (like it does when previewed on mobile), mostly everything stays side by side. Ideally I would like the tablet to respond similarly to how the page is responding on a mobile device. I know media queries can solve this problem, but am unfamiliar with them and everything I have tried so far has not worked.

[albertsg · Accepted solution]

Hi @ljakiel, I strongly suggest using media queries as you mention. If you are familiar with CSS, working with media queries shouldn't be a problem. 

For tablet, you could do something like this:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    YOUR CSS HERE
}

All the CSS you write inside that media query will apply to pages with a width from 768px to 1024px, which will be more or less the "size" of tablets.

Check this link, it will provide you a better idea of how to use them: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/#tablets