Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #748518

    Hi,
    I added a badge to my home page. It’s only displayed at the page with the id 28. So far it works the way I wanted.
    Now I want to hide the badge on mobile devices, but the code I’m using is not working:

    1.)
    img, a img { border: 0; }
    #badge1 {position: fixed;
    z-index: 100;
    right: 20px;
    top: 480px;}

    2.)
    .page-id-28 #badge1 {display: block !important;}

    3.)
    @media only screen and (max-width: 768px) {#badge1 { display: none !important; }}

    4.)
    #badge1 {display: none;}

    Can you help me?

    Thanks & kind regards

    • This topic was modified 7 years, 9 months ago by Steffen.
    #748521

    Hi Steffen!

    Please remove “!important” from following code

    .page-id-28 #badge1 {
        display: block !important;
    }

    Best regards,
    Yigit

    #748524

    Hi Yigit,

    thanks for your fast reply!

    If I remove the “!important” from the code the badge is not displayed at all.

    If I add code 1.), 2.) and 4.) ist works fine unless the badge is displayed on mobile devices.

    Other ideas?

    #748527

    Hi!

    Then please change that code to following one

    @media only screen and (min-width: 769px) {
    .page-id-28 #badge1 {
        display: block !important;
    }}

    Regards,
    Yigit

    #748533

    It works!

    Thank you, Yigit!

    #748535

    Hi!

    You are welcome!

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Hide badge on mobile devices’ is closed to new replies.