-
Posts
-
Hi,
I am trying to use the following css to allow the correct stacking of columns on mobile devices:
@media (max-width: 768px) {
.flex .av-layout-grid-container + .av-layout-grid-container {
display: flex;
flex-direction: row-reverse;
flex: auto;
flex-wrap: wrap-reverse;
}
.avia-builder-el-last .right_top {
float: right;
}
.avia-builder-el-first .left_bottom {
float: left;
}
}I have applied the .flex to the grid row and the .right_top the the right column and the .left_bottom to the left column inside the grid row.
The grid row in question is with the cloud and lightning gif image
The columns are still stacking incorrectly. Please can you confirm whether or not this is the correct css for this?
Thank you.
Hey Travelyst,
Please edit your Grid Row element and choose to display cells next to each other – http://i.imgur.com/1eMsMKX.png
If that does not help, please post a screenshot and show the changes you would like to make. You can upload your screenshots on imgur.com or Dropbox public folder and post the links here :)Best regards,
YigitHello,
This is how it appears when applying your recommendation above: http://prntscr.com/fbn8zr
This will not work due to the small image and large amount of text.
I would like this section (3 rows of 1/2 columns) to stack text, image, text, image, text image…. with the each cell displayed on its own but stacking in the correct order.
Here is a screenshot of current setup (each cell to display on its own): http://prntscr.com/fbnc0u
I understand that websites read from left to right but I have used similar css as mentioned in first post, in other themes and it has worked perfectly.
Please advise.
Thank you.
Hi,
It would be a lot simpler if you referred to this post – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/ and added two of the same elements to your page in reverse order and hide/display depending on screen size :)
Best regards,
Yigit
- You must be logged in to reply to this topic.