-
Posts
-
Hello
I added phone number and email with icons to my top bar by using this code in header/extra elements[av_font_icon icon='ue854' font='entypo-fontello' style='
' caption='' link='' linktarget='' size='18px' position='left' color='#808080'][/av_font_icon] <span class=”custom-header-meta”>(630) ……</span>
[av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' link='' linktarget='' size='18px' position='center' color='#808080'][/av_font_icon] <span class=”custom-header-meta”>service@……….</span>Client wanted me to flip phone icon to face phone number so I did it by using this code
.phone-info .av-icon-char{
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
But that also flipped my email icon.Questions:
1. How can I flipp only phone icon ue854 so it is facing phone number but keep email icon default
2. On mobile in vertical view icons are all over the place-how can I keep them by the phone # and email address.
3. My social icons disappeared on mobile view. How can we fix that.Thank you
Hello
I managed to fix the icon facing issue by downloading new font and using that code in the header/extra elements[av_font_icon icon='ue800' font='fontello' style=' ' caption='' link='' linktarget='' size='18px' position='left' color='#808080'][/av_font_icon] <span class=”custom-header-meta”>(630)……….</span> [av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' link='' linktarget='' size='18px' position='center' color='#808080'][/av_font_icon] <span class=”custom-header-meta”>service@,,,,,,t.com</span>
Can somebody help me with mobile issues? Thank you
Hi,
Thank you for the inquiry.
The phone info container is restricted in size because of this css code.
.responsive .phone-info { width: 10%; float: left; }This limits the width to only 10% of the parent container. Please try to set the width to 100%.
Best regards,
IsmaelThank you
I did that so the icons are closer to the phone # and email. That helps a little bit but still doesn’t look right.
If I set this up to 100% the phone icon is very far away from phone number, then I have mail icon after phone number and in the row below email address.
Icons should be right next o the phone number and email address.
In one or two rows.Either way is fine.
I’m talking about vertical view.The second issue is that on mobile social icons completely disappear. I don’t have my linkein and facebook.
Hi,
Sorry for the late reply, to show the social icons on mobile, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:@media only screen and (max-width: 479px) { .responsive #top #wrap_all #header .social_bookmarks { display: block !important; } }For your phone & email shortcode, both spans are in a single div with the class “phone-info” try using a div for each span.
Please include an admin login in the Private Content area so we can check further.Best regards,
MikeThank you. It worked for Fb and Linkedin Icons.
It didn’t show up on horizontal view but I have changed it to
@media only screen and (max-width: 779px) {
.responsive #top #wrap_all #header .social_bookmarks {
display: block !important;
}
}
and now icons show on both view.
I have added user and password i private session.Hi,
Thanks for the login, I changed your HTML to this:<span class="topbar-phone">[av_font_icon icon='ue800' font='fontello' style=' ' caption='' link='' linktarget='' size='18px' position='left' color='#808080'][/av_font_icon] (xxx) xxx-xxxx</span> <span class="topbar-email">[av_font_icon icon='ue805' font='entypo-fontello' style=' ' caption='' link='' linktarget='' size='18px' position='center' color='#808080'][/av_font_icon] (Email address hidden if logged out) "> (Email address hidden if logged out) </span>Please clear your browser cache and check.
Best regards,
Mike
- The topic ‘Phone number and social icons on mobile issues’ is closed to new replies.