Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • June 21, 2019 at 12:50 pm #1112317
    LOFOB

    Hello,

    I’m trying to create a section of three icons side by side that will be visible on all screen sizes, however, I cannot find a way to prevent Enfold from automatically converting my columns into a full width element on mobile. How can this be accomplished for just this section? Thanks!

    June 22, 2019 at 5:00 am #1112475
    Rikard

    Hey LOFOB,

    It does break on my end, the icons are on their own line on mobile resolutions. Is that not what you are looking for?

    Best regards,
    Rikard

    June 22, 2019 at 9:04 pm #1112621
    LOFOB

    No it’s not, I’m looking to prevent the breakpoint and maintain the three columns on the mobile screen size!

    June 23, 2019 at 1:23 am #1112665
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
.post-entry-734 div .av_one_fifth {
    margin-left: 6% !important; 
    width: 15.2% !important; 
}
.post-entry-734 div .av_one_fifth.avia-builder-el-36 {
    margin-left: 0% !important; 
    width: 15.2% !important; 
}
}

    Then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

    June 23, 2019 at 12:24 pm #1112700
    LOFOB

    That did it, thanks for the help! If I want to apply this to a different section as well, do I just change the post entry # in the CSS?

    June 23, 2019 at 4:31 pm #1112712
    Mike

    Hi,
    Glad this helped, yes you can change the post entry # to apply to a new section, or if you add a custom class to the element and use this class instead of the post entry # you can apply it to anywhere on your site.
    Please let us know if you want a hand in setting this up.

    Best regards,
    Mike

    June 24, 2019 at 8:20 am #1112847
    LOFOB

    Perfect thank you, this is an element repeated on many pages, that helps a lot!

    June 24, 2019 at 10:41 am #1112872
    Rikard

    Hi,

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

    Best regards,
    Rikard

    June 24, 2019 at 2:39 pm #1112930
    LOFOB

    Actually I do. Is there a way to create a class, and not and ID for the sections I am trying to target? As I mentioned above they are repeated throughout the site and it’s not good web design practice to make a bunch of repeating IDs!

    June 24, 2019 at 2:42 pm #1112931
    LOFOB

    I should more specifically say: how can I repeat this effect across many sections w/ a code example? Thanks!

    June 25, 2019 at 3:24 am #1113084
    Mike

    Hi,
    Typically, I write solutions to be specific so to not conflict with other pages and elements.
    But if you would like to try this across your whole site, please try this css:

    @media only screen and (max-width: 767px) { 
div .av_one_fifth {
    margin-left: 6% !important; 
    width: 15.2% !important; 
}
div .av_one_fifth {
    margin-left: 0% !important; 
    width: 15.2% !important; 
}
}

    If this doesn’t work please post a link to the new page so we can examine.

    Best regards,
    Mike

    June 25, 2019 at 11:22 am #1113203
    LOFOB

    I’ll just have to go through a tweak the original code a bunch of times for all those sections… I don’t want to break the rest of the columns. An ID doesn’t work as the “avia-builder-el-36” element needs to be changed for each new section also.

    Really wish that you could preserve columns on mobile for instances like this!

    June 26, 2019 at 6:12 am #1113479
    Ismael

    Hi,

    Thank you for the update.

    The custom class field should enable you to target specific elements so that you don’t have to use their default css selectors (e.g. “avia-builder-el-36″, “av_one_fifth” etc).

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Best regards,
    Ismael

    June 26, 2019 at 11:29 am #1113573
    LOFOB

    Sounds good, all set on my end now!

    June 27, 2019 at 5:53 am #1113795
    Rikard

    Hi,

    Great, thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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