I use these classes in the salient theme to arrange the columns in the correct order for desktop. I believe it is called push and pull.
vc_col-sm-push-6 and vc_col-sm-pull-6
I do this in order to achieve a staggered design on larger devices (image left, text right, next row; text left, image right) and an alternating design on small devices (image>text>image>text etc)
Unfortunately there is a problem with the rows that I have applied these classes to. On my desktop browser, the complete row is moving 20px. to the left, and thus the columns are no longer directly above each other.
The problem is the same in FF, Safari or Chrome on macOS 10.13.6 This is not visible on the iPhone iOS13
There's an easier way to achieve the reverse ordering on mobile. You can give the row you wish to reverse a classname such as "mobile-row-reverse" and then add this into the custom css box located in the Salient options panel > general settings > css/script related tab:
@media only screen and (max-width: 1000px) {
.mobile-row-reverse > .span_12 {
flex-direction: column-reverse;
}
}
That issue on IE seems to be related to the "full height" row feature. Please try to add this into the custom css box located in the Salient options panel > general settings > css/script related tab and test again:
Hello,
I use these classes in the salient theme to arrange the columns in the correct order for desktop. I believe it is called push and pull.
vc_col-sm-push-6 and vc_col-sm-pull-6
I do this in order to achieve a staggered design on larger devices (image left, text right, next row; text left, image right) and an alternating design on small devices (image>text>image>text etc)
Unfortunately there is a problem with the rows that I have applied these classes to. On my desktop browser, the complete row is moving 20px. to the left, and thus the columns are no longer directly above each other.
The problem is the same in FF, Safari or Chrome on macOS 10.13.6
This is not visible on the iPhone iOS13
Hey Again, Hope you had a Great Weekend,
Unfortunately there are not supported as of now and therefore causing the issue.
Please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team
Hello Tahir,
the url of the site is: https://www.deafvalbak.nl
pages where this happens are:
https://www.deafvalbak.nl/
https://www.deafvalbak.nl/introductie/
https://www.deafvalbak.nl/duurzaam/
https://www.deafvalbak.nl/hoe-het-werkt/
Strange enough: it looks OK on Brave/Chrome/Firefox.
It looks bad on Safari (no images visible in the rows)
It looks bad on windows/Internet Explorer 11 (columns really narrow)
Gonna escalate it to the Developer so he may add in a response.
Best
ThemeNectar Support Team
Hey steenvreter,
There's an easier way to achieve the reverse ordering on mobile. You can give the row you wish to reverse a classname such as "mobile-row-reverse" and then add this into the custom css box located in the Salient options panel > general settings > css/script related tab:
@media only screen and (max-width: 1000px) { .mobile-row-reverse > .span_12 { flex-direction: column-reverse; } }Hi, thanks for the code.
This works for most browsers on mac and iphone. But I still see strange rendering on windows and IE11
https://links.lambdatest.com/4MZH9BEOGSU5JHLQI14DKSBWFRHI9VQZ5W1D6KNE8080AGD8INHC5IHMOYP1WYZIis
there something I can do about that?
aram
Hey Aram,
That issue on IE seems to be related to the "full height" row feature. Please try to add this into the custom css box located in the Salient options panel > general settings > css/script related tab and test again:
.vc_row.vc_row-flex.vc_row-o-full-height > .span_12 { width: 100%; }