Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 21, 2020 at 6:36 pm #1239831
    rhae

    Hi, I’m trying to get the title in the iconbox element to center vertically with the icon, but I can’t get it to work in custom css.
    This is what I’m trying to do: Example

    I hope it is possible.

    August 21, 2020 at 9:06 pm #1239844
    Jordan Shannon

    Hey rhae,

    Please provide a link to your site/page in question so we can try and work out the css if possible.

    Best regards,
    Jordan Shannon

    August 21, 2020 at 11:17 pm #1239891
    rhae

    Hi Jordan,

    great! Thanks. The info is attached. The page is still a work in progress, but I’ll stop working on it for now.

    Best regards, Haiko.

    August 24, 2020 at 4:59 am #1240243
    Rikard

    Hi Haiko,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    .iconbox_left_content .iconbox_content {
  padding-top: 15px;
}

    Best regards,
    Rikard

    August 24, 2020 at 11:25 am #1240307
    rhae

    Hi Rikard,

    thank you, that would work. The bottom part of the text disappears though. Do you have any idea why that happens?

    The reason why I tried to avoid padding is the issues that it might give with responsiveness.
    We make most font sizes smaller on mobile, and that would mean making specific padding settings for mobile as well, which we try to avoid.
    Would CSS based on something like this work?

    DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
DIV {
  Fake text
}

    I wouldn’t know how to put in the icon as well.

    Best regards, Haiko.

    August 30, 2020 at 2:25 pm #1241928
    Mike

    Hi,
    Sorry for the late reply, and thanks for the login, I found your test page and added line-height: 30px; to your “.iconbox_icon” adjustment, this corrected the position of the Pseudo element :before and made the title much closer. Then I added this css to your Quick CSS:

    #top .iconbox_left_content > .iconbox_content {
	height: 30px !important;
    vertical-align: middle !important;
    display: table-cell !important;
}

    So with this we make the title the same height as the icon, and then use vertical-align in a table-cell.
    Please clear your browser cache and check.

    Best regards,
    Mike

    August 30, 2020 at 2:56 pm #1241940
    rhae

    Hi Mike,

    thanks for looking into it. This looks great. Thanks for adjusting the code!

    Best regards, Haiko.

    August 30, 2020 at 4:28 pm #1241966
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold and Thank you for your patience.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Vertically center iconbox element title’ is closed to new replies.