Avia message box content alignment - Support | Kriesi.at

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

Author

Posts

January 21, 2018 at 3:36 pm #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.

January 22, 2018 at 6:24 am #900621

Nikko

Inactive Moderator

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

January 22, 2018 at 1:22 pm #900793

Dutchman

Participant

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;
}

January 23, 2018 at 5:24 am #901155

Nikko

Inactive Moderator

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

January 23, 2018 at 9:03 am #901282

Dutchman

Participant

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.

January 23, 2018 at 11:12 am #901363

Nikko

Inactive Moderator

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

January 23, 2018 at 8:48 pm #901650

Dutchman

Participant

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

January 23, 2018 at 9:43 pm #901682

Jordan Shannon

Inactive Moderator

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

Author

Posts

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

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