Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1271732

    Hello,

    I’m using the Icon Grid and was not able to find any documentation on how to style it. One item we are attempting to do is to top align the element icon-title grouping so that the element titles are top aligned horizontally (some titles are one line and others are two lines which is creating the misalignment condition).

    Note that we do wish for the element icon-title grouping to still be positioned near the center of the ’tile’ and so would want to add padding to the top of the ’tile’ to achieve that effect.

    The existing misaligned condition can be viewed at: https://sidevelopment.wpengine.com/about/ about the middle of the page within the ‘Our Core Values’ section.

    Note that we have already added some Quick CSS to the associated color section and icon grid element to adjust the text and icon size.

    I greatly appreciate your help. Be safe, stay healthy, and enjoy the day!

    All the Best,
    Nathan

    #1271764

    Hey StrategyDriven,

    Are you needing them to be aligned to the top of the section and not the center?

    Best regards,
    Jordan Shannon

    #1272004

    Hi Jordan,

    Yes. We need them to be aligned to the top of the Icon Grid element. We would then like to add some padding to the top of the Icon Grid element to move the content down a bit.

    Thank you for the question and your help. Be safe, stay healthy, and enjoy the day!

    All the Best,
    Nathan

    #1272306

    Hi Nathan,

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

    #icon_size .avia-icongrid-flipbox li .avia-icongrid-front .avia-icongrid-inner {
        top: 30%;
    }

    Best regards,
    Rikard

    #1272967

    Hi Rikard,

    Thank you for the suggestion. That code moved the entire icon grid up within the color section but the individual panel icon-title units kept their same relative center position meaning the icon-title groups with two row titles remained misaligned with the icon-title groups with one row titles.

    I greatly appreciate your continued support. Be safe, stay healthy, and enjoy the weekend!

    All the Best,
    Nathan

    #1273873

    Hi,

    Sorry for the late reply. Please try this CSS instead:

    .avia-icongrid-wrapper header.entry-content-header {
        display: table;
        position: absolute;
        left: 0;
        width: 100%;
    }

    Best regards,
    Rikard

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

You must be logged in to reply to this topic.