Phone number and social icons overlapping on mobile

[manuel.nelles]

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

[Sonnal S Sinha]

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

[manuel.nelles]

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;}
}

[Sonnal S Sinha]

Great

[Author]

Posts