Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1134150

    My extra info (phone number and social media icons) don’t display on mobile mode, but do on pc and ipad.

    I’d like to have them centered at the top of the screen. I’ve already looked through other css codes on similar issues but nothing works so far.

    Please help.
    Thanks,
    Cameron

    #1134973

    Hey Cameron,

    Try adding this css code in Quick CSS, located in Enfold > General Styling:

    @media only screen and (max-width:767px) {
      .responsive #top #header .social_bookmarks {
        display: block !important;
      }
    }

    Best regards,
    Nikko

    • This reply was modified 5 years, 2 months ago by Nikko.
    #1136213

    Thanks. It’s still not working. Could you go in to my site and see if you can fix it please?

    #1136274

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, be sure to clear the cache a few times over.

    Best regards,
    Jordan Shannon

    #1141089

    Ok now it’s partly working. I have the social media icons towards the middle on my mobile but not on the desktop.

    Also, on the mobile I’m getting duplicate social media icons. One pair is right next to the hamburger. I don’t want it right next to the hamburger.

    • This reply was modified 5 years, 2 months ago by Cameron.
    #1141333

    Hi Cameron,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create an admin user and post the login credentials in the “private data” field.

    Best regards,
    Nikko

    #1141428

    Thank you. I’d please like to have just white icons at the top above my phone number.

    #1141505

    Hi Cameron,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 767px) {
      .responsive #header_meta .social_bookmarks li {
          color: #fff;
      }
      #top .av-logo-container .social_bookmarks li {
        display: none;
      }
    }
    

    https://cl.ly/45f59f937d15 Like this you mean?

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1141579

    Thanks! This centers everything on my mobile, and gets rid of the duplicate social media icons.

    But how can I also center the social media icons on a desktop? It’s still to the right on a desktop.

    #1141676

    Hi Cameron,

    In Quick CSS, find:

    @media only screen and (max-width: 995px) {

    then add this code above it:

    #top .phone-info {
        float: none;
        margin-top: 0;
    }
    
    #top #wrap_all .social_bookmarks {
        float: none;
        text-align: center;
        padding: 0;
    }
    
    #top #wrap_all .social_bookmarks li {
        display: inline-block;
        float: none;
    }

    Best regards,
    Nikko

    #1142952

    Works great, thanks!

    #1142956

    It centered the icons on the desktop, but now the 2nd icons appear again on the mobile next to the hamburger. I think something in my coding is out of place and I don’t know how to correctly order it. Could you please take a look and correct it for me.

    Thanks.

    #1143061

    Hi Cameron,

    I see, find this media query:

    @media only screen and (max-width:767px) {

    Then below it add this css code:

    .responsive #top #header .main_menu .social_bookmarks {
        display: none !important;
    }

    Best regards,
    Nikko

    #1147732

    thanks that works!

    #1147763

    Hi Cameron,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘No phone number on mobile mode, extra info not centered’ is closed to new replies.