Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 10, 2017 at 10:01 am #850086
    sensiblekaren

    Hello

    I have put the following in the extra element field

    [av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color=''][/av_font_icon] <span class=”custom-header-meta”>0117 900 0000</span>[av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color=''][/av_font_icon] <span class=”custom-header-meta”>(Email address hidden if logged out) ?Subject=Rental%20enquiry” target=””></span> (Email address hidden if logged out)

    Then in CSS

    span.custom-header-meta {
    float: left;
    display: block;
    height: 20px;
    line-height: 20px;
    padding-right: 10px;
    }

    Please see the screeen shot in private content – the icons need next to the phone and email, at the moment there is too much space between them. Please advise. Many thanks

    • This topic was modified 7 years, 2 months ago by sensiblekaren.
    September 11, 2017 at 5:37 am #850337
    Rikard

    Hey sensiblekaren,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    September 11, 2017 at 12:44 pm #850451
    sensiblekaren

    Thank you.

    Provided info below so you can see the site.

    In additon to extra element icons having too much space between the icon and the phone no and the icon and the email on a desktop… on a mobile they look a bit squashed – the icon is almost on top of the phone no and on top of the email address, I would like them smaller on a phone and a small space between the icon and the phone no and a space between the icon and the email

    September 11, 2017 at 4:39 pm #850571
    Yigit

    Hi,

    I inserted your icons using HTML instead of shortcodes, corrected your HTML then added following code to Quick CSS in Enfold theme options > General Styling tab

    .phone-info .av-icon-char {
    float: left;
    padding-right: 5px;
}

    Please review your website

    Best regards,
    Yigit

    September 11, 2017 at 5:25 pm #850596
    sensiblekaren

    Thanks very much, I really appreciate you doing that. Still looks a bit squashed on a mobile view, what is the best way to sort that?

    September 12, 2017 at 2:57 pm #851028
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 480px) {
.phone-info span {
    font-size: 14px !important;
    margin-right: 10px!important;
}}

    Best regards,
    Yigit

    September 15, 2017 at 2:53 pm #852544
    sensiblekaren

    Thanks very much

    September 15, 2017 at 2:54 pm #852547
    Yigit

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘icons next to extra elements – close up space’ is closed to new replies.