The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Desktop-only CSS

3 posters

Go down

Solved Desktop-only CSS

Post by zmorka March 26th 2018, 2:32 pm

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);
}


Last edited by zmorka on March 26th 2018, 3:26 pm; edited 1 time in total
zmorka
zmorka
New Member

Female Posts : 17
Reputation : 1
Language : Polish, English

http://slomiany-zapal.forumpolish.com

Back to top Go down

Solved Re: Desktop-only CSS

Post by tikky March 26th 2018, 3:08 pm

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
tikky
tikky
Forumember

Posts : 894
Reputation : 157
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

Back to top Go down

Solved Re: Desktop-only CSS

Post by zmorka March 26th 2018, 3:26 pm

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

Female Posts : 17
Reputation : 1
Language : Polish, English

http://slomiany-zapal.forumpolish.com

Back to top Go down

Solved Re: Desktop-only CSS

Post by tikky March 26th 2018, 3:28 pm

Go to ACP > Display > Templates > General > overall_header under
Code:
<meta http-equiv="content-style-type" content="text/css" />
tikky
tikky
Forumember

Posts : 894
Reputation : 157
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

Back to top Go down

Solved Re: Desktop-only CSS

Post by zmorka March 26th 2018, 3:40 pm

Thanks a lot!
zmorka
zmorka
New Member

Female Posts : 17
Reputation : 1
Language : Polish, English

http://slomiany-zapal.forumpolish.com

Back to top Go down

Solved Re: Desktop-only CSS

Post by Draxion March 26th 2018, 3:54 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum