Excluding portions of CSS while on mobile

0 Views

I’m trying to use some CSS to solve a layout problem while displaying my website on PC. I’ve found a really simple solution, but now the element isn’t at the right place while visualizing the page on mobile. It would be great if the CSS I’ve inserted in my website only applies when the page is visualized on PC.

Any kind of solution? Thanks!

Post Views: 0

Related posts

2 comments

  1. To create a section of CSS that should only be applied on screens of a certain size, you can use media queries. For example:

    /* Regular site styles */
@media only screen and (max-width: 600px) {
    /* Change styles to work for small screens */
}

    You’re also likely to want to put the below in your <head> element to make the zooming work as expected on a mobile site:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    I’d recommend reading this article for more details on the viewport meta tag.

  2. If you want to solve your layout problem you should learn about media queries:

    @media screen and (min-width: 480px) {
    body {
        // styles for 480px or larger screens
    }
}

    Wikipedia:

    Media Queries is a CSS3 module allowing content rendering to adapt to
    conditions such as screen resolution (e.g. smartphone screen vs.
    computer screen). It became a W3C recommended standard in June 2012,
    and is a cornerstone technology of Responsive web design.

Comments are closed.