Desktop-only CSS
3 posters
Page 1 of 1
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
HiI'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);
}
Last edited by zmorka on March 26th 2018, 3:26 pm; edited 1 time in total
Re: Desktop-only CSS
Hey,
you only need this in your css
and you forgot this
for your code to work
ATT,
See
http://responsivedesignchecker.com/checker.php?url=http%3A%2F%2Fslomiany-zapal.forumpolish.com&width=370&height=200
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
|
ATT,
See
http://responsivedesignchecker.com/checker.php?url=http%3A%2F%2Fslomiany-zapal.forumpolish.com&width=370&height=200
Re: Desktop-only CSS
Go to ACP > Display > Templates > General > overall_header under
|
Re: Desktop-only CSS
Problem solved & topic archived.
|


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as

PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

» Your desktop
» Whats on your desktop screen?
» Javascript distinguish mobile from desktop
» How to delete file in desktop
» WebArtz
» Whats on your desktop screen?
» Javascript distinguish mobile from desktop
» How to delete file in desktop
» WebArtz
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum