Desktop-only CSS

Technical Details

Forum version : #ModernBB
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : All members
Forum link : http://slomiany-zapal.forumpolish.com

Description of problem

Hi
I'm having another problem. So I would like to have a gif (animation) as a headerbar on my forum. But I noticed that on mobiles gif is not moving or isn't displayed at all so I figured I'll use the code that'll display a gif on screens bigger than 800px and a static image on screens smaller than that(in the web version) but it doesn't work. Is the code below not supported by forumotion? If so is there any way to achieve the effect I am aiming for?

In short: @media screen and (min/max-width: Npx) NOT WORKING

My code:

Code:

/*NA DESKTOP*/
@media screen and (min-width: 800px) {
  /*WŁAŚCIWOŚCI BANNERA*/
  .headerbar {
    background-color: #000102 !important;
    background-size: 70% !important;
    background-image: url(https://j.gifs.com/BL7JAk.gif) !important;
  }
}

/*WŁAŚCIWOŚCI BANNERA*/
.headerbar {
    background-color: #000106;
    background-size: 70%;
    background-image: url(https://i.imgur.com/OentmNl.jpg);
}

Hey,
you only need this in your css

Code:

.headerbar {
    background-color: #000106;
    background-size: cover;
    background-image: url(https://j.gifs.com/BL7JAk.gif);
}
@media only screen and (max-width: 768px) {
        .headerbar {
                background-image: url(https://i.imgur.com/OentmNl.jpg);
        }
    }


and you forgot this

Code: <meta name="viewport" content="width=device-width, initial-scale=1">

for your code to work


ATT,

---

See
http://responsivedesignchecker.com/checker.php?url=http%3A%2F%2Fslomiany-zapal.forumpolish.com&width=370&height=200

Nice, one more question:
where do I put that html tag?

Go to ACP > Display > Templates > General > overall_header under

Code: <meta http-equiv="content-style-type" content="text/css" />

Thanks a lot!