Phone number and social icons overlapping on mobile

Home Forums BeFit Theme Support Phone number and social icons overlapping on mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #86404
    manuel.nellesmanuel.nelles
    Member
    • Topics: 8
    • Replies: 20
    • Total: 28
    Member since: September 13, 2017

    Cheers guys,

    please review my site on mobile:
    www.manuel-nelles.de

    Originally the phone number was not shown, so I added the following code to custom css box in theme options:

    @media screen and (max-width:479px) {
    .topbarright { display:block;}
    .top-phone { font-size:12px;}
    .box { display:none;}
    }
    
    @media screen and (max-width:767px) and (min-width:480px) {
    .topbarright { display:block;}
    .top-phone { font-size:14px;}
    .social-top { float:left;}
    }

    Now, the phone number is shown, but i overlaps the social icons.

    What to do?

    Thanks and regards Manuel

    #86460
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 31025
    • Total: 31025
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    @media screen and (max-width:479px) {
    .top-phonearea { right:0 !important;}
    .social-icons a { width:22px !important; height:22px !important; line-height: 18px !important; font-size: 12px !important;}
    .top-phone { padding-left:32px !important;}
    .email-top, .email-top a, .top-phone { font-size: 11px !important;}
    }

    Regards,
    Chris

    #86475
    manuel.nellesmanuel.nelles
    Member
    • Topics: 8
    • Replies: 20
    • Total: 28
    Member since: September 13, 2017

    Thanks buddies,

    it didn’t work exactly, but i have modified the code on my own and it looks good, now:

    @media screen and (max-width:479px) {
    .topbarright { display:block;}
    .top-phonearea { right:10 !important;}
    .social-icons a { width:22px !important; height:22px !important; line-height: 18px !important; font-size: 12px !important;}
    .top-phone { padding-left:32px !important;}
    .email-top, .email-top a, .top-phone { font-size: 11px !important;}
    }
    #86486
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 31025
    • Total: 31025
    Member since: August 16, 2013

    Great

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.