Desktop-only CSS

Go down

Solved Desktop-only CSS

Post by zmorka on March 26th 2018, 15:32

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, 16:26; edited 1 time in total
avatar
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 pedxz on March 26th 2018, 16:08

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
avatar
pedxz
Forumember

Male Posts : 107
Reputation : 22
Language : speaker daemonium & português
Location : Lisboa, Portugal

http://ajuda.forumeiros.com/u62843

Back to top Go down

Solved Re: Desktop-only CSS

Post by zmorka on March 26th 2018, 16:26

Nice, one more question:
where do I put that html tag?
avatar
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 pedxz on March 26th 2018, 16:28

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

Male Posts : 107
Reputation : 22
Language : speaker daemonium & português
Location : Lisboa, Portugal

http://ajuda.forumeiros.com/u62843

Back to top Go down

Solved Re: Desktop-only CSS

Post by zmorka on March 26th 2018, 16:40

Thanks a lot!
avatar
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 on March 26th 2018, 16:54

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


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 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 2161
Reputation : 274
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Back to top


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