Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • February 26, 2021 at 9:11 pm #1284003
    KellyKilgallon

    Hello –

    I’m having an issue with indenting the 3rd lines of text when using the shortcode icon option in a text box (see example):

    Here an example of what I mean

    How can I indent that third line to match the first two lines? This solution would need to be made throughout the website.

    Thanks for the help.

    February 27, 2021 at 6:07 pm #1284137
    Victoria

    Hey KellyKilgallon,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .avia_textblock .av_font_icon.avia-icon-animate {
  min-height: 80px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 27, 2021 at 8:46 pm #1284171
    KellyKilgallon

    I just added the code and it does not seem to be working. Here is what the lines still look like.

    February 28, 2021 at 4:35 pm #1284252
    Victoria

    Hi KellyKilgallon,

    Best regards,
    Victoria

    March 4, 2021 at 9:16 pm #1285539
    KellyKilgallon

    Thank you, Victoria. The layout has been fixed to be consistent.

    I used this code in the CSS:

    #top .avia_textblock .av_font_icon.avia-icon-animate {
    min-height: 80px;
    }

    The way the icon and text are presented on the page looks like this:

    [av_font_icon icon='ue885' font='entypo-fontello' style='' caption='' size='25px' position='left' color='#00539c' link='' linktarget='' animation='' id='' custom_class='' av_uid='av-182t1v3' admin_preview_bg=''][/av_font_icon] It can also be planned in advance when dysplasia or cancer develops as a result of long-standing IBD. When surgery is planned, it’s important to be surgically marked by a Wound, Ostomy, Continence Nurse (WOCN) to ensure proper placement of the ostomy.

    I’m looking to have all lines match and not wrap under the icon. Is there a way to do this? I’ve placed the pages that have text wrapping under the icon in private content. It begins at the third line.

    March 6, 2021 at 4:44 am #1285969
    Rikard

    Hi,

    Please try this CSS instead:

    .iconbox_content_container p span.av_font_icon {
    margin-bottom: 60px;
}

    Best regards,
    Rikard

    • This reply was modified 3 years, 9 months ago by Rikard.
    March 8, 2021 at 6:32 pm #1286506
    KellyKilgallon

    Hi Rikard –

    I placed that code in the child theme CSS but it did not work.

    Any other tricks up your sleeve?

    – Kelly

    March 10, 2021 at 7:33 am #1286994
    Rikard

    Hi,

    Please try this instead:

    .iconbox_content_container p span.av_font_icon {
    margin-top: -40px;
}

.iconbox_content_container p span.av_font_icon .av-icon-char {
    line-height: 100px;
}

    Best regards,
    Rikard

    March 26, 2021 at 6:41 pm #1290619
    KellyKilgallon

    Hello –

    The code did not work. I’m having the same issue >> See Here.

    Any other advice?

    March 30, 2021 at 8:32 am #1291249
    Rikard

    Hi,

    Please try this instead:

    .iconbox_content_container p span.av_font_icon {
    margin-top: -40px !important;
}

.iconbox_content_container p span.av_font_icon .av-icon-char {
    line-height: 100px !important;
}

    Best regards,
    Rikard

    March 30, 2021 at 9:19 pm #1291456
    KellyKilgallon

    I placed that code in quick CSS and in the Edit CSS child theme and still getting the same results (text wrapping).

    See here

    I can give you temporary access if you’d like.

    March 31, 2021 at 5:23 am #1291485
    Guenni007

    it is a little bit like a list-style-position – you can have the list-style-type (dots, square etc or image ) inside or outside.
    i do not see your page – but a little shift of the icon outside the container to the left could help:

    .avia-icon-pos-left {
    margin-right: 0;
    margin-left: -30px;
}

    If the absolute Alignment to the left is important for you – you had to give to that text-block alb element a custom-class f.e.: shifty
    and have then:

    .shifty p {
  margin-left: 30px
}

.shifty .avia-icon-pos-left {
    margin-right: 0;
    margin-left: -30px;
}

    see here result on top – bottom: default : https://webers-testseite.de/kelly/

    April 2, 2021 at 5:38 pm #1292018
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    April 5, 2021 at 2:54 pm #1292512
    KellyKilgallon

    Fantastic! This solved the problem. Thank you all for the help.

    – Kelly

    April 7, 2021 at 12:49 am #1292945
    Ismael

    Hi,

    Awesome! Glad it is solved. Please do not hesitate to open another thread should you need anything else.

    Have a nice day.

    Best regards,
    Ismael

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