Columns on mobile

You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours

Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#112870 Columns on mobile

Posted in ‘Editor’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Japio on Monday, 23 January 2023 19:18 GMT

Monday, 23 January 2023 09:41 GMT

Japio

Hello,

Is there a way to specify the order of columns on mobile? On a page we have the image on the left and the text on the right. Below that the text on the left and the image on the right. On mobile we would like the image to be displayed above the text is that possible?

Attachments

Monday, 23 January 2023 10:36 GMT

Ryan

Columns does not currently have any options to set ordering, but your template may have some css class for this, depending on which css framework it uses (Bootstrap, UIKit etc.)

Please post a link to an example article.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 23 January 2023 11:29 GMT

Japio

Hello Ryan,

We have a Joomla website with a virtueplanet template.

https://www.sexybikini.nl/de/

Monday, 23 January 2023 11:47 GMT

Ryan

It looks like your template is using an older version of Bootstrap, which does not have the ordering classes of Bootstrap 4/5 Try adding this to your template stylesheet:


@media (max-width:640px) {
    .wf-columns-order-flip .wf-column {
        order: 1;
    }
}

then add the wf-columns-order-flip class to the column in the Columns dialog.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 23 January 2023 11:56 GMT

Ryan

Correction, the css should be:


@media (max-width:640px) {
    .wf-columns-order-flip .wf-column:first-child {
        order: 1;
    }
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 23 January 2023 12:57 GMT

Japio

Hello Ryan,

It does work in JCE, but not on mobile.

Attachments

Monday, 23 January 2023 12:59 GMT

Ryan

I don't see the css class as added in the front-end, this may be because the fornt-end is using cached assets, so you may need to refresh the cache in your template framework.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 23 January 2023 13:32 GMT

Japio

Hello Ryan,

I must be doing something wrong, this is what I did, see attachment.

Attachments

Monday, 23 January 2023 14:10 GMT

Ryan

Why have you added it to the _template.css file and not the template.css file?

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 23 January 2023 14:18 GMT

Ryan

Also, I'm not referring to the Joomla cache, but the caching/compression tools in your template framework.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 23 January 2023 14:39 GMT

Japio

Hello Ryan,

So I did 2 things wrong.
But it works now.

Thanks for the explanation and patience.:D

Monday, 23 January 2023 14:41 GMT

Ryan

We get there in the end, that's what this business is all about! 😃

The next challenge is to figure out the best way to add some form of ordering to the Columns tool.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 23 January 2023 16:36 GMT

Japio

Hello Ryan,

Now have this @media (max-width: 640px) { .wf-columns .wf-column:first-child { order: 99; } } css at the bottom of the website. how do i get this out.

Attachments

Monday, 23 January 2023 16:51 GMT

Ryan

Did you add any css to the template framework that was not in the template.css file?

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 23 January 2023 19:18 GMT

Japio

Hello Ryan,

Found, thanks!:D