Don’t suppose on the same deal its possible to get 6 row columns?

Have removed.

Sorry..
.main_color {
background-size: 100%!important;
}
.main_color {
background-size: contain!important;
}

This did…

• This reply was modified 1 year, 10 months ago by mattwalt.

Doesn’t seem to be working…

Hi – thanks for that
Yes – on these 3 pages the blog grid should reverse so starts at Lesson 1
This won’t work as it needs to be reversed on all screen sizes.

Would be great to be able to change the blog order to acceding/descending by date.

Thanks M

That does work :-)

Removed another attempt CSS which seemed to block this at first.

As you’ve mentioned it does add extra space between the div’s

Just tested on a lesson page – works just fine. More space as mentioned but its really not noticeable.

Thanks – will now start changing the 5000 odd individual code blocks to be responsive by position (Seems to work on the by position not be simply reversing) :-/
At least its working :-)

Correct
Being Arabic text the info needs to run from right to left.
So on Desktop runs correctly
If I reverse the rows then is also works correctly on mobile.
So on Mobile runs correctly.
The issue is I really do need it reversed which seems to be the issue at the moment – this runs to the same order as on desktop.
So the correct order should run:
desktop is correct with (top row only):
ZIQ YAQ KIN YAK
tablet with two rows is correct with (top row only): The 2 left hand columns should display above the right hand.
KIN YAK
ZIQ YAQ
and mobile with one row should be
YAK
KIN
YAQ
ZIQ
As mentioned there are like 135 odd pages each with 7-8 rows to reverse so doing by page/element rather than by row would be ideal – but if it has to be by row – then I have no choice :-)

Failing being able to reverse the rows on tablet – I could then go direct to the below 990px wide option – but then would need to set a max size for the blocks so they don’t display massive on tablet view – say max 400px or something… The images are saved out at 700px. Hoping this doesn’t mean adding code to the individual blocks ;-)
Thanks M

Yup found the toggle. It works great for smaller screens…
But as mentioned after – the issue is that for this site on sizes between 990 and 690 either get non reversed 2 block rows or a massive block image…
Need to ideally get a 2 row column which is also reversing.

One suggestion was to set different view for different devices – but having to deal with 100’s of rows on the site that its probably an impractical approach.
Is there not a way to use the colour block element to do the column reversal?

Thanks

Purchase code – created an api key – but its not accepting

Surely something like this would be more elegant solution i approach for my situation? Though struggling to get it to work :-)

@media only screen and (max-width: 989px) {
.flip-mobile .flex_column_table {
display:flex !important;
flex-direction:column-reverse;
}
.flip-mobile .flex_column_table .flex_column {
flex:0 0 auto;
}
}
Using ID .flip-mobile

Yes – on the smaller option I get 2 blocks but they are flowing normally not reversing.

Basically have 4-6 rows of 4 columns / colour section
Each row needs to reverse on smaller screens – break point at 990px

The current oder:
1 2 3 4
5 6 7 8
9 10 11 12
…
They need to run tablet:
4 3
2 1
8 7
6 5
12 11
10 9
And on mobile:
4
3
2
1
8
7
6
5
12
11
10
9

You may need to baby me through this :-)

Where can I find Row settings / Row Screen options etc.? Theme file editor / Enfold theme options / Colour blocks themselves…

Here is one of the pages below. As mentioned there is one page currently using the same elements which needs to flow normally on smaller screens.

My web guys response:

No issue other than all plugins/themes should he kept up to date for security.

Thanks Victoria – that splits the tel and email and has on either side. But its still above the logo.

M