Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 12, 2020 at 4:03 pm #1260153
    jonesthelight

    Hi – is there any way to make some rows collapse from right to left?
    If a row is 2 x 50% columns, can the right column be first on mobile – but only on specific chosen rows?
    Thanks, Colin

    November 13, 2020 at 2:42 am #1260253
    Jordan Shannon

    Hey Colin,

    This may be possible with a bit of custom coding, but unfortunately goes beyond the scope of support here in the forums. You would need a freelancer to complete this.

    Home

    Best regards,
    Jordan Shannon

    November 13, 2020 at 1:35 pm #1260336
    jonesthelight

    There is another thread I have been looking at #1022098
    In there Ismael offers a couple of code snippets – the first I can’t seem to make work at all, it just breaks the display and the second reverses the rows on the page from top to bottom. He also links to a page about the Flex options, which do seem that row-reverse and column-reverse are standard features but I’m not clever enough to implement them. Could either if them look again at the issue as I think it should be a simple solution. I’d be really grateful, as I have spent hours on a site and it’s looking like if I can’t get the rows to collapse this way on mobile I will lose the job or have to start over with another theme.

    November 21, 2020 at 1:44 pm #1261953
    Mike

    Hi,
    Sorry for the late reply, this is an example of using Flexbox to reverse rows.

    Best regards,
    Mike

    November 21, 2020 at 2:43 pm #1261958
    jonesthelight

    Thanks Mike – I did actually get it to work on another thread – https://kriesi.at/support/topic/row-collapse-order-2/
    Seemed a simpler way around it.

    November 21, 2020 at 4:19 pm #1261965
    jonesthelight

    Actually Mike – can I ask one more thing?
    Here is the code I’m using:
    @media only screen and (max-width: 767px) {
    .flip-mobile .flex_column_table {
    display:flex !important;
    flex-direction:column-reverse;
    }
    .flip-mobile .flex_column_table .flex_column {
    flex:0 0 auto;
    }
    }
    I am placing 2 x 50% wide columns in a color section and giving the color section a custom class of flip-mobile.
    The only thing I don’t lioke is that, in the mobile view (or on a browser with width less than 767px) I am getting too much white space below the first 2 images. I think this is probably the spacing between the columns – but I don’t know how I could close that down a little.
    You can see the effect by narrowing the browser at the link provided.
    If you can suggest a solution that would be great.

    November 21, 2020 at 8:43 pm #1261991
    Mike

    Hi,
    Glad to hear you got this sorted out, for the new issue 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) { 
#top.page-id-351 #after_full_slider_2 > div > div, #top.page-id-351 #av_section_1 > div > div {
	padding: 0 !important;
}
#top.page-id-351 #after_full_slider_2 > div > div > div > div > div.-flextable {
	margin-top: 0 !important;
}
}

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

    Best regards,
    Mike

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