Issue with Row Reverse on tablet

Hello,

I’m using WPBakery and I have three rows, each with 2 columns:
image / text
text / image
image /text

On both tables and mobile this should be:
image
text
image
text
image
text.

For some reason the Row Reverse on tablet is not responding, it still shows:
text
image
image
text
text
image.

You can see this at iPad landscape, but you can also see for yourself when you narrow your browser screen on desktop. To create the rows and columns I used your example at:
https://woodmart.xtemos.com/woodmart_element/accessories-description-product/
I have this problem wit Row Revers on a tablet both on a subpage of my website as well as my product page with a HTML block.

See provided website links. How to solve this?

Kind regards

On iPad landscape

Hello,

Could you please check how it behaves with default WordPress themes, such as WooCommerce Storefront, to help determine if the issue is related to our theme or not?

Kind Regards

Hello Luke,
I’m sorry, unfortunately I can’t. I can’t afford to take the risk of messing up something…

Kind regards

Hello,

Could you please create a staging site so I can investigate that issue there?

Here is an article on how to clone the website and move it to the staging platform – https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/

Kind Regards

[marco]

Hello Luke,

To my opinion it’s not necessary to create a staging site since you can investigate the issue with the example from the Woodmart WPBakery elements library:
https://woodmart.xtemos.com/woodmart_element/accessories-description-product/

Maybe I was not clear about the issue with Row Reverse on tablet. Please allow me to explain this better with the above mentioned template “accessories-description-product” example from you’re theme, it’s exactly the same as what I have on 2 pages of my website, where I applied the template.

As said, I’m using WPBakery and I have three rows, each with 2 columns:
image / text
text / image
image /text

On Tablet this should be:
image
text
image
text
image
text.

When you download the template, the second row has Row Reverse setting for tablet switched ‘on’. The problem or issue is at Tablet in Landscape. I investigated this further. Row Reverse does a row reverse when switched on, but to my opinion too late. Before it does the Row Reverse as desired, it separates the 2 columns in a row to 1 column. Please see attached Print Screens what happens when narrowing the screen .

Image “0-Start-position-full-screen.jpg” is OK and speaks for itself.

“1-First-change” shows when narrowing the screen the change to a situation I don’t want to have at iPad Landscape:
image
text
text
image
image
text

“2-Second-change.jpg” show the situation I actually want on iPad (and Row Reverse for tablet starts to work at this screen size):
image
text
image
text
image
text.

Or in short: one row with two columns are divided into two columns above eachother first when narrowing the screen (iPad Landscape size) and after that you have to narrow the screen much more to have Row Reverse started.

Row Reverse for Mobile is working fine.
So what I actually want is a situation at iPad Landscape showing either:
– 3 rows with 2 columns next to eachother as image “0-Start-position-full-screen.jpg” (this has my first preference);
or
– Row Reverse as image “2-Second-change.jpg” showing:
image
text
image
text
image
text.

How to achieve this?
My sincere apologies if I was not clear enough at my first request for support in this matter.
I’m looking forward to your answer.

• This reply was modified 1 year, 5 months ago by marco.

Attachments:

You must be logged in to view attached files.

[Luke Nielsen]

Hello,

I apologize for the delay.

I have copied your structure to my website for testing, so when checking the default tablets (not landscape) it works as expected – https://prnt.sc/jZr3pQ_ZGUQ_ , when the landscape is enabled, the reverse doesn’t work – https://prnt.sc/iBvQejYGJrzD and this is due to the breakpoints, this option depends on the viewport and it will work only on the Screen width between 991px and 769px (on the tablet portrait only).

WPBakery, by default, has 4 breakpoints (screenshot: https://monosnap.com/file/doniyPfwe3O10ix0eVYyyCpCmHsNpW):
• Desktop: Screen width 1200px and above
• Tablet Landscape: Screen width between 1199px and 992px
• Tablet Portrait: Screen width between 991px and 769px
• Mobile: Screen width 768px and below

Unfortunately, for now, it works in such a way.

Kind Regards

• This reply was modified 1 year, 5 months ago by Luke Nielsen.

Hello Luke,

Thank you for testing. Is it possible with custom css to have the specific row (by giving it an extra class name) in this situation https://prnt.sc/iBvQejYGJrzD responding like this: https://prnt.sc/jZr3pQ_ZGUQ_ ?
So giving Tablet Landscape: Screen width between 1199px and 992px the same behaviour as Tablet Portrait: Screen width between 991px and 769px?

Kind regards.

Hello,

Try to add the below code to Theme Settings -> Custom CSS, clear the cache and let me know.

@media (max-width: 1199px) and (min-width: 992px) {
    .reverse-col-on-mobile2 div:first-child {
        order: 2;
    }
}

Kind Regards

Hello Luke,

Thank you, this works. I’m very happy this is solved!

Kind regards.

Hello,

You are welcome! Always remember that you can reach out to us with any questions you may have.

Have a good day!

Kind Regards

[Author]

Posts