Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 27, 2015 at 10:33 am #478990
    QBDSwedenAB

    Hello!

    I am trying to change the order on my flex columns (av_one_half)’s when in responsive mode.

    I googled some and found some CSS code that I adjusted to this:

    .flex_column {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    }
    .avia-builder-el-6 {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
    }
    .avia-builder-el-4 {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
    }`

    July 28, 2015 at 5:25 am #479416
    Ismael

    Hi QBDSwedenAB!

    Thank you for using Enfold.

    Did it work? The box-ordinal-group css property is currently not supported on all browsers specially on IE and it requires that the column display is set to flex. You will have to come up with another solution, probably, by using javascript. Or creating another set of columns with different order. Use css media queries to hide and show these columns on different screen sizes.

    Regards,
    Ismael

    July 28, 2015 at 9:43 pm #479926
    QBDSwedenAB

    Hi again!

    Thanks as always for your resposnse Ismael. The dislay hide/show solution would be one way, but it makes the loading time much longer, since it will be duplicate images. The javascript would be optimal, but I don’t that.

    The con of using this box-ordinal-group css would be for mobile users using Internet Explorer. However, it’s very few using IE on their cellphones/surfpads, therefore it’s worth it in my opinion, and even for those users, they will only face some small order errors.

    But to ask your question, no I did not get it to work. Would you take your time and check my code and see what’s missing?

    July 30, 2015 at 1:59 pm #480685
    Ismael

    Hey!

    Where did you add the columns? What page? Please add the url here.

    Regards,
    Ismael

    July 30, 2015 at 9:29 pm #480964
    QBDSwedenAB

    I’d like to change the order of a image and text

    August 2, 2015 at 12:12 pm #481754
    QBDSwedenAB

    Could you find the correct code?

    August 5, 2015 at 9:48 pm #483596
    QBDSwedenAB

    To summarize what I’d like to make with CSS is to:

    Change the order of the elements.

    August 6, 2015 at 4:11 am #483649
    Ismael

    Hey!

    I’m afraid the flexible box layout is not going to work on your current setup. All columns inside the container will be affected by the box and box orientation property. You can see an example here: http://robertnyman.com/css3/flexible-box-layout/flexible-box-layout.html

    Anyway, you can try this:

    #after_section_2 .content .entry-content-wrapper {
    width: 100%;
    display: -moz-box;
    display: -webkit-box;
    display: box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}

#after_section_2 .content .entry-content-wrapper .flex_column:nth-child(1) {
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    box-ordinal-group: 3;
}

#after_section_2 .content .entry-content-wrapper .flex_column:nth-child(2) {
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    box-ordinal-group: 2;
}

#after_section_2 .content .entry-content-wrapper .flex_column:nth-child(3) {
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

    If it doesn’t work, please create another set of columns then use css media queries. Or try to use a mobile redirect plugin: https://wordpress.org/plugins/advanced-mobile-redirect/

    Cheers!
    Ismael

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