Responsive

Resolved Jul
(@yb5586164)

2 years, 5 months ago
Mobile

Desktop

How can i change that on mobile it should be text image text image and not text image image text…?
- This topic was modified 2 years, 5 months ago by Jul.

Viewing 8 replies - 1 through 8 (of 8 total)

Moderator jordesign
(@jordesign)

2 years, 5 months ago

Hey @yb5586164 – swapping the order around like that is something that likely needs some CSS code to do so. Could you please share a link to the actual page and I can take a closer look?

sunza
(@sunza)

2 years, 5 months ago

It’s for the theme default home page template available in the site editor. https://share.icloud.com/photos/091YOkG0PRaQSXDdI6_RvgCGg Could you provide the CSS code for that, please ?

Moderator jordesign
(@jordesign)

2 years, 5 months ago

Hey @sunza – the first step would be to add a CSS class to the columns that you want to appear first. In this particular instance you’d want to add the CSS class to the second column which has the text in it.

https://wordpress.org/documentation/article/columns-block/#advanced

If you can do that – and then share a link to the page – I can help with some CSS code to specifically target that column

sunza
(@sunza)

2 years, 5 months ago

Thanks in advance ! This is the link to a temporary site home page for testing purposes : https://offertrip.s3-tastewp.com
Kavya Gokul (a11n)
(@properlypurple)

2 years, 5 months ago
Hey @sunza!

You can first assign a custom class to any columns like this, that you want to reverse on mobile (see screenshot below)

Once you have the style in place, you can add some global additional css like this:
```
@media( max-width:782px ) {
  .wp-block-columns.reverse-on-mobile {
    flex-direction: column-reverse
  }
}
```
Just to add here, there are open pull requests for the columns and media+text block to support use-case like this, so this should not require any css changes in the future.
- https://github.com/WordPress/gutenberg/pull/55763
- https://github.com/WordPress/gutenberg/pull/56279
- This reply was modified 2 years, 5 months ago by Kavya Gokul (a11n). Reason: Added information about PRs on Github
sunza
(@sunza)

2 years, 5 months ago

Thanks @properlypurple, it’s working now after I followed the steps you explained.

Thread Starter Jul
(@yb5586164)

2 years, 5 months ago

It didn’t work for me… what did i miss / mess ?
Moderator jordesign
(@jordesign)

2 years, 5 months ago
It didn’t work for me… what did i miss / mess ?

@yb5586164 without seeing the actual site you’re working on it is tricky to tell – are you able to share a URL?

The main thing to double check would be:
- Did you add a class to the column block (as in the screenshot)
- Did you add the CSS code correctly

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Responsive’ is closed to new replies.