Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • August 13, 2020 at 11:11 am #1237339
    Chrisi2020

    Hello Enfold Team,

    The iPad portrait mode has a resolution of 768px. The enfold breakpoint is 767px.

    How can I change the breakpoint so that in the Portrait Mode view the boxes are not displayed next to one another but one below the other. As in the mobile portrait view.

    There are already some solutions here in the forum, but unfortunately they don’t work for me.

    Thanks for your help!
    Chrisi

    August 13, 2020 at 12:08 pm #1237382
    Victoria

    Hey Chrisi2020,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width:768px) and (max-width: 989px){
   div .av_one_third {
        margin-left: 0%;
        width: 100%;
    }
    div .av_two_third {
        margin-left: 0%;
        width: 100%;
    }
}

    This code will work for all pages, if you want it to work for just this page, you need to add the page-id class.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 13, 2020 at 1:13 pm #1237402
    Chrisi2020

    Hey Victoria,

    now it works properly! Thank you very much for the quick help.

    Best regards
    Chrisi

    August 13, 2020 at 2:55 pm #1237438
    Victoria

    Hi Chrisi2020,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    September 7, 2020 at 4:54 pm #1244024
    bbitc

    Hi,

    I exactly have the same issue. I want the icon boxes appear below each other as soon as the screen width < 1600px. Otherwise the text will not wrap and it looks ugly :(

    I already tried to enter the css code in the enfold general styling and also tried custom.css. It’s not reflected.

    
@media only screen and (min-width:768px) and (max-width: 989px){ // also tried (max-width: 1600px)
   div .av_one_third {
        margin-left: 0%;
        width: 100%;
    }
    div .av_two_third {
        margin-left: 0%;
        width: 100%;
    }
}

    Do you have a hint?
    Thanks!

    • This reply was modified 4 years, 2 months ago by bbitc.
    September 8, 2020 at 5:35 pm #1244363
    Victoria

    Hi bbitc,

    You can try making the font size of the titles smaller, maybe this will be a better option in this case:

    
.iconbox .iconbox_content .iconbox_content_title {
    font-size: 18px !important;
}

    And it seems to me you can make the content wider.

    Best regards,
    Victoria

    September 8, 2020 at 10:02 pm #1244475
    bbitc

    Thanks Victoria,

    I increased the container width up to 100% and applied the css to have a smaller title. It works like this, but I do not like the 100%-width: the site seems too big now.

    If I ONLY set the title font size to 18px, the old problem this exists. See the site with page width of e.g. 796px.Text does not fit.

    ss

    Can you please assist me to have the break point of the icon boxes adjusted to < 1600px as requested?

    Kind regards
    Boris.

    • This reply was modified 4 years, 2 months ago by bbitc.
    September 10, 2020 at 9:39 pm #1245016
    bbitc

    I found the option where you can influence the behavior in general when editing the column settings.
    Perhaps this is a good feature request: set your own wrapper threshold.

    September 12, 2020 at 11:29 am #1245314
    Victoria

    Hi bbitc,

    So did you get it working for you or do you need more help?

    Best regards,
    Victoria

    September 12, 2020 at 12:23 pm #1245329
    bbitc

    Hi Victoria,

    Yes I need still help: how can I manage to wrap the boxes if the resolution is < 1600px?
    In the config I found, I can only switch between the 2 predefined options.

    Thanks, regards
    Boris.

    September 12, 2020 at 5:54 pm #1245403
    Victoria

    Hi Boris,

    Do you mean you want to keep the boxes 100% width below 1600px screens sizes?

    Best regards,
    Victoria

    September 13, 2020 at 8:42 am #1245480
    bbitc

    Hi Victoria,
    yes!
    If resolution is > 1600px –> keep 3 boxes, one beside each other
    If resolution is < 1600px –> one box fills the screen 100% and the next is shown below the box, not beside.

    Like this my text should look good.

    Regards
    Boris.

    September 14, 2020 at 12:48 am #1245568
    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: 1600px) {
#top.home #after_layer_slider_1 .post-entry-11 .flex_column.av_one_third.flex_column_table_cell {
    display: table-row !important;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    September 14, 2020 at 9:12 pm #1245850
    bbitc

    That’s it! Thank you very much for your support, Mike! Problem solved :)

    September 14, 2020 at 9:35 pm #1245866
    Victoria

    Hi bbitc,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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