Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 12, 2021 at 5:06 am #1271732
    StrategyDriven

    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

    January 12, 2021 at 7:01 am #1271764
    Jordan Shannon

    Hey StrategyDriven,

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

    Best regards,
    Jordan Shannon

    January 13, 2021 at 3:12 am #1272004
    StrategyDriven

    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

    January 14, 2021 at 5:23 am #1272306
    Rikard

    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

    January 16, 2021 at 10:23 pm #1272967
    StrategyDriven

    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

    January 20, 2021 at 4:00 am #1273873
    Rikard

    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

    January 27, 2021 at 1:21 am #1275642
    StrategyDriven

    Hi Rikard,

    Thank you for the updated CSS code. Unfortunately, this did not change the positioning of the items within the Icon Grid.

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

    All the Best,
    Nathan

    January 28, 2021 at 9:15 am #1276003
    Rikard

    Hi,

    I can’t see the CSS applying at all, did you remove it? If so then please add it back so that we can see the actual results.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.