Home › Forums › BeFit Theme Support › Phone number and social icons overlapping on mobile
- This topic has 3 replies, 2 voices, and was last updated 6 years, 1 month ago by
Sonnal S Sinha.
Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorPosts
-
October 28, 2017 at 11:57 am #86404
Cheers guys,
please review my site on mobile:
www.manuel-nelles.deOriginally 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
October 30, 2017 at 6:02 am #86460Hi,
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,
ChrisOctober 30, 2017 at 7:04 am #86475Thanks 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;} }
October 30, 2017 at 7:57 am #86486Great
-
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.