“Text” and “Images” not displaying well on mobile.

You can add a the same image before the text with a display:none. And then with media queries you can add a display:block to that image and a display:none to the original image. Hope that makes sense.

Hello @mdtrunzo , thanks for your reply…

Please note that I am building the website using wpbakery. how can I do that with it.

You need to add some CSS. You have to to “Appearance”, then “customize” and add the CSS on the CSS Editor at the bottom of the menu.

Hi.
Which images you want to fix position?
Everything looks ok for me.

Ok, thanks @mdtrunzo

Please, can you post the CSS code you said I should add…

Hello @ikaring ,

Yes, it looks ok on a laptop/desktop but when view on a mobile device the image that is in the same row with the title “what is content marketing” goes down. I want that image to always show up first on a mobile device before the title.

Do you have an idea on how to do that?

I’m not familiar with WPBakery, but there might be css class to arrange column order.

FYI, this thread is the same problem. Hope that helps.
https://themenectar.ticksy.com/ticket/1517682/

Thanks @ikaring , what you sent helped me to find the solution.

Here is it.

1. Go to the row you want to swap the content on mobile view and include this class name “row_reverse”

2. Go to customize and include the custom CSS Below

@media (max-width: 767px){
.row_reverse{
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
}
}

Good:)