Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 24, 2022 at 5:54 pm #1336932
    ilona-l

    Hi,
    I need help with vertically centering icons and text in the header and footer area according to the mockups.
    Icons and text in the head are located in the child theme’s includes/helper-main-menu.php

    I’m very sorry – the child theme’s style.css is a mess but I took over building the site from another person and wasn’t able to clean it up.

    Any help ist really appreciated (and I’m in a bit of a hurry since the site has to go live on Friday…).

    Thank you very much and kind regards

    Ilona

    January 25, 2022 at 5:38 am #1336974
    Rikard

    Hey ilona-l,

    Please try the following in Quick CSS under Enfold->General Styling:

    .social-bar-custom .center a {
  vertical-align: text-top;
}

.social-bar-custom span.telnr {
  line-height: 50px;
}

.social-bar-custom a.tellink {
    vertical-align: middle;
}

    Best regards,
    Rikard

    January 25, 2022 at 11:44 am #1337039
    ilona-l

    Thank you Rikard,

    the icons in the center of the header are aligned fine.
    The icon in the left and the phone number are still as they were.

    And the icons and phone number in the footer are also not centered vertically.

    Can you help?

    Best regards

    Ilona

    January 25, 2022 at 1:21 pm #1337064
    Rikard

    Hi,

    Please try this CSS as well:

    .social-bar-custom .center a, .social-bar-custom .left a {
  vertical-align: text-top;
}

.social-bar-custom a.tellink {
    vertical-align: super;
}

#footer .social-bar-custom {
    overflow: visible;
    vertical-align: inherit;
}

    Best regards,
    Rikard

    January 25, 2022 at 2:01 pm #1337071
    ilona-l

    Hi Rikard,

    the icons in the middle of the header are aligned fine. The phone icon in the left is now too low and the phone number a bit to high.

    The icons in the footer should be a little bit lower and the phone number a bit higher.

    Can you please take another look?

    Thank you in advance

    Ilona

    January 26, 2022 at 4:27 am #1337196
    Rikard

    Hi,

    Please try this CSS as well:

    .social-bar-custom .left a {
    vertical-align: middle;
}

#footer .social-bar-custom img {
    margin-top: 10px;
}

#footer .social-bar-custom a.tellink {
    vertical-align: top;
    line-height: 60px;
}

    Best regards,
    Rikard

    January 27, 2022 at 11:46 am #1337487
    ilona-l

    Hi Rikard,

    thank you, now it looks great in Chrome (and the footer also in Firefox und Safari) but the header is still not correctly aligned in Firefox and Safari.

    Do you have an idea?

    Best regards

    Ilona

    January 27, 2022 at 1:35 pm #1337505
    Rikard

    Hi,

    Please try this CSS as well:

    .avia-mozilla #header .social-bar-custom .left a {
  vertical-align: bottom;
}

.avia-safari #header .social-bar-custom a.tellink {
  vertical-align: super;
}

    Best regards,
    Rikard

    January 27, 2022 at 2:08 pm #1337520
    ilona-l

    Hi Rikard,

    it looks great now in all browsers!

    Thank you so much for your quick help!

    Best regards

    Ilona

    January 28, 2022 at 5:51 am #1337620
    Rikard

    Hi,

    Great, I’m glad that we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    January 28, 2022 at 10:41 am #1337657
    ilona-l

    I think the problem is solved and you can close this topic!

    Again, thank you very much!

    January 28, 2022 at 11:59 am #1337687
    Rikard

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Vertically center icons & text in header / footer’ is closed to new replies.