Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 23, 2015 at 5:51 pm #557123
    voldemarasp

    Hi there,

    Why do I get my iphone display phone icon in two lines?

    Here is the code:

    <span class=”av_font_icon avia_animate_when_visible av-icon-style- avia-icon-pos-left avia_start_animation avia_start_delayed_animation” style=”color:#fff; border-color:#fff;”><span class=”av-icon-char” style=”font-size:20px;line-height:20px;” aria-hidden=”true” data-av_icon=”” data-av_iconfont=”entypo-fontello”>  +370 5 270 4470 </span></span>  <span class=”av_font_icon avia_animate_when_visible av-icon-style- avia-icon-pos-left avia_start_animation avia_start_delayed_animation” style=”color:#fff; border-color:#fff;”><span class=”av-icon-char” style=”font-size:20px;line-height:20px;” aria-hidden=”true” data-av_icon=”” data-av_iconfont=”entypo-fontello”>   (Email address hidden if logged out) </span></span>

    Here is screen from Safari:

    http://postimg.org/image/ixbaf5c93/

    Thanks.

    December 23, 2015 at 5:56 pm #557131
    Yigit

    Labas Voldemarai!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px)
.responsive .phone-info {
    text-align: left;
}}

    If that does not help, please create a temporary admin login and post it here privately.

    Su Kaledom!

    Cheers!
    Yigit

    December 23, 2015 at 5:59 pm #557134
    voldemarasp

    Here is the login info:

    December 23, 2015 at 6:01 pm #557137
    voldemarasp

    I am sorry login info is:

    December 23, 2015 at 6:08 pm #557150
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 480px) {
.phone-info * {
    font-size: 12px!important;
}
#header_meta .container {
    width: 100%!important;
    max-width: 100%!important;
}}

    Cheers!
    Yigit

    December 23, 2015 at 6:10 pm #557152
    voldemarasp

    Still no help.

    Any other ways to solve this problem?

    December 23, 2015 at 6:12 pm #557156
    voldemarasp

    If I enter test not digits than it works fine.

    December 23, 2015 at 6:12 pm #557157
    voldemarasp

    text

    December 23, 2015 at 6:25 pm #557170
    Yigit

    Hey!

    Basically, width is not enough for numbers icons etc. You can try decreasing font size even more to solve the issue or you can use following code to remove icons on mobile 

    @media only screen and (max-width: 480px) {
.phone-info .av_font_icon { display: none !important; }}

    Best regards,
    Yigit

    December 23, 2015 at 6:28 pm #557172
    voldemarasp

    This code is not making it disappear.

    But if I add test instead of digits it stands perfect, why is that?

    I need this icons to be seen on mobile too.

    December 27, 2015 at 10:14 pm #557615
    Yigit

    Hey!

    Please post the content of your Quick CSS field here using http://pastebin.com/.
    You can try adding spaces between your phone number.

    To keep the text in one line, the best solution would be decreasing font size as i suggested here – https://kriesi.at/support/topic/phone-number-or-small-info-text-2/#post-557150

    Regards,
    Yigit

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