Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #900366

    Hi!
    I’m using the Avia message box and i made some adjustments to it:

    .infotipsbox .avia_message_box_content {
    text-transform: none !important;
    font-weight: 500 !important;
    font-size:16px !important;
    text-align: left !important;
    }
    .infotipsbox.avia_message_box.avia-border-solid {
    border-width: 2px !important;
    border-radius: 9px !important;
    }
    .infotipsbox [data-av_icon]:before {
    margin: 26px !important;
    font-size: 40px !important;
    }
    .avia_message_box_content p {
    vertical-align: super !important;
    margin-left: 30px !important;
    }

    I would like to align the icon on the left side but in the middle of the box (vertically centered) and the text aligned to the right of the icon, not below the icon. Please check the private content section for more info.

    #900621

    Hey Dutchman,

    #top .avia_message_box_content {
        position: relative;
        padding-left: 80px;
    }
    
    #top .avia_message_box_content .avia_message_box_icon {
        position: absolute;
        left: -20px;
        top: 10px;
    }
    
    #top .avia_message_box_content p {
        margin-left: 0;
    }

    Hope this helps :)

    Best regards,
    Nikko

    #900793

    Hi Nikko! Thank you for your fast reply. I’m one step further but the icon is not vertically centered. This is the current code:

    .infotipsbox .avia_message_box_content {
    text-transform: none !important;
    font-weight: 500 !important;
    font-size:16px !important;
    text-align: left !important;
    position: relative;
    padding-left: 60px;
    }
    .infotipsbox.avia_message_box.avia-border-solid {
    border-width: 1px !important;
    border-radius: 9px !important;
    }
    .infotipsbox [data-av_icon]:before {
    font-size: 40px !important;
    position: absolute;
    right: 10px;
    }
    .avia_message_box_content p {
    vertical-align: super !important;
    margin-left: 0; !important;
    }
    #901155

    Hi,

    With the current structure, you just need to adjust the top value to center it vertically, just change this part of code:

    .infotipsbox [data-av_icon]:before {
    font-size: 40px !important;
    position: absolute;
    right: 10px;
    }

    to this one:

    .infotipsbox [data-av_icon]:before {
    font-size: 40px !important;
    position: absolute;
    right: 10px;
    top: 30px;
    }

    Hope this helps.

    Best regards,
    Nikko

    #901282

    Hi Nikko,

    top:30px pushes it out of the message_box when the text next to it is one line. And please look what happens as soon as you resize the screen. Its not in the middle/vertically centered.

    #901363

    Hi,

    I see, can you try to replace this code:

    .infotipsbox .avia_message_box_content {
        text-transform: none !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        text-align: left !important;
        position: relative;
        padding-left: 60px;
    }

    with this one:

    .infotipsbox .avia_message_box_content {
        text-transform: none !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        text-align: left !important;
        position: relative;
        padding-left: 60px;
        display: flex;
        align-items: center;
    }

    and this code:

    .infotipsbox [data-av_icon]:before {
        font-size: 40px !important;
        position: absolute;
        right: 10px;
    }

    with:

    .infotipsbox [data-av_icon]:before {
        font-size: 40px !important;
        position: absolute;
        right: 10px;
        margin-top: -13px !important;
    }

    Hope this helps :)

    Best regards,
    Nikko

    #901650

    Thank you Nikko!!!!! Works like a charm :)

    #901682

    Hi,

    I’m glad Nikko was able to aid you in getting this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Avia message box content alignment’ is closed to new replies.