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
zmorka- New Member
-
Posts : 17
Reputation : 1
Language : Polish, English
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
pedxz- Forumember
- Posts : 692
Reputation : 136
Language : 🇵🇹
Re: Desktop-only CSS
Nice, one more question:
where do I put that html tag?
where do I put that html tag?
zmorka- New Member
-
Posts : 17
Reputation : 1
Language : Polish, English
Re: Desktop-only CSS
Go to ACP > Display > Templates > General > overall_header under
|
pedxz- Forumember
- Posts : 692
Reputation : 136
Language : 🇵🇹
Re: Desktop-only CSS
Thanks a lot!
zmorka- New Member
-
Posts : 17
Reputation : 1
Language : Polish, English
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
Draxion- Support Moderator
-
Posts : 2512
Reputation : 321
Language : English
Location : USA

» Whats on your desktop screen?
» Your desktop
» Your Desktop (since the other seems pruned)
» How to delete file in desktop
» WebArtz
» Your desktop
» Your Desktop (since the other seems pruned)
» How to delete file in desktop
» WebArtz
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum