Okay
  Public Ticket #2076557
How can I get rid of the border under the header o, mobile?
Closed

Comments

  •  6
    Frederick started the conversation

    See this page:

    https://fr.callmefred.com/passage-de-wordpress-site-web-statique-publii/

    When scaled down to mobile screen size, my custom CSS rules which prevent the use of a border under the header / top section don't apply. 

    When I inspect the border element, I see that, for some reason, there is a rule, which applies up to 56.1875 em, a rule which I have NOT created:

    @media (max-width: 56.1875em)

    style.css?v…ac5c81917:1
    .content>header {

    1. border-bottom: 1px solid #fff;
    2. display: -webkit-box;
    3. display: -ms-flexbox;
    4. display: flex;
    5. margin: 0 4%;
    6. position: absolute;
    7. top: 0;
    8. width: 92%;
    9. z-index: 1;

    }

    A rule which displays this line under the header... 

    Also, you can see that the color of the burger menu fades on mobile (scale up & down to see the difference). 

    How can I get ride of that? 

    And make sure that my general  custom CSS settings apply to all screen sizes? 

    I've had a look at the visual-override.js file in input but I haven't found something which might cause this bug (or I'm not good enough to find it...).

    Can you please help? 

    Thanks,


    Frédérick

    Attached files:  Capture d’écran 2019-07-10 à 19.37.20.png

  •  410
    Bob, replied

    Hi,

    The best way is to check how the CSS rules look and override all needed; for that have a look at the main.css, find the rule you need, copy it to Custom CSS and modify it to work as you want:

    main.css

    @media all and (max-width: 56.1875em) {
        .content > header {
            border-bottom: 1px solid #ffffff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin: 0 4%;
            position: absolute;
            top: 0;
            width: 92%;
            z-index: 1;
        }
    }
    

    custom CSS:

    @media all and (max-width: 56.1875em) {
        .content > header {
            border-bottom: none;
           }
    }

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

  •  6
    Frederick replied

    Thanks, I've now made all my modifications!
    Cheers

  •  10
    Ajeet replied

    Hi Fredrick, 

    How did you add icons such as rocket in the Menu bar ? . They look great

  •  6
    Frederick replied

    Hello Ajeet, 

    these are simply emojis added next to the menu item name in the label box. 

    You can find them on http://emojipedia.org

    Best,

    Frédérick

    Attached files:  Capture d’écran 2019-07-11 à 10.36.35.png
      Capture d’écran 2019-07-11 à 10.37.25.png

  •  10
    Ajeet replied

    Thanks Fredrick.

    Are they free for commercial use ? Not clear here:

    https://emojipedia.org/licensing/

    Since you might be using for commercial use, thats why I asked


  •  6
    Frederick replied

    Everyone's using generic (i.e. most common) emojis everywhere.

    https://www.howtogeek.com/293831/are-emoji-copyrighted/

    Just don't use Apple specific emojis, obviously ;-)

    There are also Open Source Emojis like https://openmoji.org/

    Gorgeous ones by the way.

  •  10
    Ajeet replied

    Thanks so much :) Cleared my doubts.

  •  10
    Ajeet replied

    Hey Frederick

    Hope you are doing well. 

    I wanted to ask one thing. I pasted a few emojis in Header ( similar to your site) and also in the Editors Picks Section ( the frond page). Now in Google search console, under Security section, it started showing, "Google has detected harmful content.........., uncommon downloads and no links or urls were given" ( screenshot attached).. I can confirm that this is due to the emoji thing because when I removed the emoji, and checked the Console after few hours, there were no security issue.

    Are you experience the same issue in your Google search console ?

    Attached files:  Capture.PNG

  •  6
    Frederick replied

    Never no, I've never seen any issue related to emojis in my Google Search Console. 

    Imagine what Emojipedia would suffer :-) 

    Maybe you used some Emojis disliked by Google, who knows...

  •  10
    Ajeet replied

    I used the rocket one, and a loudspeaker :)

    I found an answer which says, "


    If Google Safe Browsing hasn't seen a particular binary before, Chrome may warn that it is uncommonly downloaded and could be dangerous.
     
    In these cases the warnings are lifted automatically if Google Safe Browsing verifies that it is benign.
    If your site is showing uncommon download warnings, you can also request a review in Search Console."

    Thread - FYI: https://support.google.com/webmasters/thread/2861105?hl=en

     

    Thanks for the reply :)