Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 27, 2023 at 11:01 am #1399399
    schweg33

    Hello together
    I have created a page here link below:

    Is it possible to set the same height for all the symbol boxes?

    and for the buttons also mobile horizontally and vertically to specify a different width. Here the code for the PC see below

    thanks in advance
    kind regards
    Franz

    February 27, 2023 at 11:55 am #1399405
    Nikko

    Hi schweg33,

    Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    .page-id-3578 #av_section_1 .av_one_third .iconbox_content {
    min-height: 258px;
}

    Hope it helps.

    Best regards,
    Nikko

    February 27, 2023 at 12:21 pm #1399407
    schweg33

    Hello Nikko
    Thank you very much
    Almost perfect :-)

    What do I have to enter if I want to enter this for all devices seperately, so for

    PC – computer
    @media only screen and (max-width: ????px)
    {
    .page-id-3578 #av_section_1 .av_one_third .iconbox_content {
    min-height: 258px;
    }
    and
    for mobile vertical
    @media only screen and (max-width: ????px)
    .page-id-3578 #av_section_1 .av_one_third .iconbox_content {
    min-height: 258px;
    }
    and
    for mobile horizontal
    @media only screen and (max-width: ????px)
    {
    .page-id-3578 #av_section_1 .av_one_third .iconbox_content {
    min-height: 258px;
    }

    i hope you understand what i mean

    thank you
    kind regards
    Franz

    February 28, 2023 at 3:51 am #1399462
    Guenni007

    Is there a page where normal users can also look at the matter?

    February 28, 2023 at 6:33 am #1399471
    schweg33

    would like to talk with Nikko further about the topic, thank you

    February 28, 2023 at 7:28 am #1399474
    schweg33

    Sorry
    Maybe you have misunderstood me
    Maybe it is written more understandable this way

    I want this setting that now applies to all devices
    .page-id-3578 #av_section_1 .av_one_third .iconbox_content {
    min-height: 270px;
    }
    can be set individually per device

    For computer only
    For tablet only
    Mobile only horizontal view
    Mobile vertical view only

    I would like to be able to set the sizes separately

    thanks in advance
    kind regards
    Franz

    February 28, 2023 at 9:08 pm #1399578
    schweg33

    Sorry this ticket is a bit messed up

    You can close it.

    Will make a new one

    thank you

    kind regards Franz

    February 28, 2023 at 9:30 pm #1399579
    Guenni007

    This is exactly why I asked for the link. There are better methods (flex-layout or even better grid-layout) to solve the same height problem – even without aiming at quite a few media-query solutions with min-height. But obviously solutions from non-moderators are not wanted. Too bad

    March 1, 2023 at 6:45 am #1399599
    schweg33

    That’s ok, thanks Guienna
    but I would like to solve this as I have described it.
    There is actually no need for a link.
    Because then I can take over the settings also for other links. And there I do not want to build everything again.
    thanks

    March 1, 2023 at 7:42 am #1399600
    Nikko

    Hi Franz,

    I apologize for the delayed response.
    Please remove the code I gave, then edit the Color Section where those iconboxes where placed.
    1. Go to Advanced > Developer Settings > Custom CSS Class and put equal-height-column and save.
    2. Go to Enfold > General Styling > Quick CSS and add this CSS code:

    #top .equal-height-column .entry-content-wrapper {
    display: flex;
}

#top .equal-height-column .entry-content-wrapper .iconbox {
    display: flex;
    min-height: 100%;
}

@media only screen and (max-width:479px) {
    #top .equal-height-column .entry-content-wrapper {
        flex-direction: column;
    }
}

    This should result in those 3 columns in the same height for all devices except for the mobile phone (portrait) where iconboxes will be using 1 column.

    If you need to use the same layout on other pages (or the same page), just do Step #1 to other Color Sections (assuming it’s the same layout).
    Hope this helps.

    Best regards,
    Nikko

    March 1, 2023 at 9:54 pm #1399730
    schweg33

    Thanks a lot
    Nikko
    So I understand it well now

    you can close this ticket

    kind regards
    Franz

    March 2, 2023 at 2:18 am #1399737
    Nikko

    Hi Franz,

    Thanks as well for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘same height for all the symbol boxex’ is closed to new replies.