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.
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: Media Queries for Standard Devices | CSS-Tricks