Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 6, 2024 at 12:10 pm #1468514
    mirotck

    Dear Enfold Team

    I would love to have 3 icon elements in one row on mobile, instead of having them aligned vertically i would love to have them horizontally basically.
    Also, i would love to have the width of that row to be the same more or less as the buttons on top. I will attach a screenshot of how it should look.
    It’s the first element on mobile layout (home).

    View post on imgur.com

    Thank you so much for providing me any sort of help. I just renewed my support licence, thanks!

    Cheers from Switzerland

    Miro

    October 6, 2024 at 2:04 pm #1468520
    Mike

    Hey mirotck,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 479px) { 
.flex_column.avia-builder-el-19 .av_font_icon {
    display: inline-block; 
    margin-left: 10%; 
}
.flex_column.avia-builder-el-19 {
    display: flex; 
    justify-content: center; 
}
.flex_column.avia-builder-el-19 .hr.hr-invisible {
    display: none; 
}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    October 6, 2024 at 4:45 pm #1468522
    mirotck

    Thank you so much, it looks fantastic!
    Is there a way to make the white box less wide? So it’s more or less the with of the symbols?
    I attach a screenshot:

    View post on imgur.com

    Thank you so much and have a lovely Sunday Mike!!

    October 7, 2024 at 5:34 am #1468537
    Ismael

    Hi,

    Thank you for the update.

    Please add this css code inside the css media query..

    .responsive #top #wrap_all .flex_column.av-2o2o-d04f592131d4626bc887b0d7857940a1 {
    width: 60%;
    margin: 0 auto;
    float: none;
}

    .. right after this css rule: 

    .flex_column.avia-builder-el-19 .hr.hr-invisible {
    display: none; 
}

    Best regards,
    Ismael

    October 7, 2024 at 4:24 pm #1468586
    mirotck

    Thank you so much, it looks fantastic now!
    Last little request: it seems like the three icons are not perfectly centered, slightly too much to the right.
    Is there a way to have them perfectly central?

    thank you Ismael, have a wonderful day!

    October 7, 2024 at 7:29 pm #1468599
    Rikard

    Hi,

    Please replace this in Mikes code:

    .flex_column.avia-builder-el-19 .av_font_icon {
    display: inline-block; 
    margin-left: 10%; 
}

    With this:

    .flex_column.avia-builder-el-19 .av_font_icon {
    display: inline-block; 
    margin: 0 5% 0 5%; 
}

    Best regards,
    Rikard

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