Row Settings Column Gap

[krainsong]

hi
I’m trying to make a 30px gap between columns on the homepage, and also to have no column gap on mobile, just have the elements show one at a time, stacked on top of each other, on mobile.
Right now I have a block of text on the left, and a gif image on the right.

When I go to Row Settings, and choose 30px for gap settings, nothing changes on the page. The text and gif are smashed up next to each other.
I have made sure there are no margins or paddings on the image module or the column.
Under the Column Settings, Responsive options I have chosen No Offset on the mobile -with a 12 columns - 1/1 setting.
So now it’s displaying fine on a mobile, but the desktop view is wrong.
It seems I can only get the desktop or the mobile view to work, but not both at the same time.
Can you help?

Fantaseek – Real Fantasy Adventures

thanks
Karen

[sanjeev]

Hello Karen,

Hope you are doing well!

Your question is more specific to the WPBakery page builder and their responsive columns, and here is the how to’s on it: Responsive Settings – WPBakery Page Builder Knowledge Base

They also have this how to on grid builder which may be of help: Grid Builder – WPBakery Page Builder Knowledge Base

Happy holidays!

Sanjeev

[krainsong]

Thanks for your swift reply.
I watched the video and what they said to do is what I did and it’s still not helping.
It seems that the Theme is not “listening to” the settings in WP Bakery Builder.
I tried playing around with some other settings like giving it a gap between columns of 15px, or 35px, etc. but it makes no difference, the text is smashed up against the image. It wasn’t doing this before the latest update.
I also tried setting the vertical align to “middle” or “bottom” of the image and there was no visible change on the front end, after refreshing the page.
Basically I can have it displaying correctly on mobile or on desktop but not both.
Right now, it’s correct on mobile, with the image centered under the text.

Fantaseek – Real Fantasy Adventures

I’m actually having the same problem on the About Me page:

About Me – Fantaseek

You can see that it looks fine on desktop, but when viewed in mobile, the right hand column is pushed over to the right, because I have set a left-margin on that column of 25px. I wish there was an easy way in the builder to tell it not to have that left margin on mobile. I chose “no offset” on mobile under the responsiveness tab, but it does nothing.

Please take a look, thanks,
Karen

[sanjeev]

I did have a look at your pages. Both of them displays:

Desktop: 2 Column layout with content on left and image on right

Mobile: Single column layout with content on top and image at bottom.

Desktop:

Mobile:

Which is expected behaviour for responsive layout. Are you saying this is incorrect and you want to lay them out differently, as in, even in desktops, the image should come below the content, and content and image should scale 100% width of the viewport?

P.S. The general layout is controlled by WPBakery and not the theme itself, so the theme update will not effect this behaviour.

[krainsong]

If you scroll down further on the mobile view on the About Me page you see the second image in the column, the logo, is flush right and being cut off. That is the problem on that view.
On that logo image, the alignment is set to center and there is no padding or margin.
I tried setting the size to Full and also to Large but it’s the same both ways.

UPDATE: It appears after a hard refresh on mobile that the logo is now not being cut off but it’s still slightly to the right and not centered. I did put a 25px margin on that column to make it not squished up against the text.

[sanjeev]

Hello Karen, the margin that you had put is what is causing the alignment issue on the mobile view. If you wanted to put the margin when its 2 column on desktop, then you should put that margin for desktop view only, and it will display fine on both views.

[krainsong]

hi
I don’t know how to put that margin for desktop view only.

In the editor you can put in the margin or padding for that column, and when I go to the Responsive Options tab, I set it on the mobile device line to “No Offset” and “12 Colunns- 1/1”
but still that column appears pushed to the right on mobile.

Thanks for your help.
Karen

[sanjeev]

Hello, this is rather a pagebuilder settings than the theme specific, so this will help: Responsive Controls for Width and Offset - WPBakery Page Builder Additionally, for more advanced CSS customizations, you can use CSS Media Queries to edit them as required per specific view port basis.

You can find the WPBakery specific knowledgebase quite helpful for editing with their page builder:

Video Tutorials
Knowledgebase