I'm trying to build a site with offset images. I can easily this do in wpbakery, however if add an 80 px margin to a text box it may look good on a desktop, but bad on a mobile device. How can I make these text boxes and images have smaller margins on mobile, but retain the spacing on a desktop?
This is a little bit complicated as WPBakery Page Builder does not have specific item padding/margin values for different devices, so I will try to explain you how you can achieve that.
Go to any single image you have added and edit it, there you will find the field to add a class, name each image with a class so we'll name it my-custom-class, then from the left WordPress sidebar go to Custom CSS > Responsive there you can add this CSS for desktop and then for mobile again in the fields you have there:
I've tried this, following the directions exactly, but no changes happen to the image. It only seems to follow whatever value I put in for the margins through the front-end editor, not what I put in custom css. Am I putting the class name in the right box?
The class is set fine and the margins are alright, the problem now is that you have set a 0 margin in WPBakery Page Builder element settings, leave it blank by default as the page builder settings will overwrite any CSS you type.
I am not sure if I understood your question completely but as I could see you want to do the same as you're doing with the images with the text blocks:
So all you need to do is follow the same example for the text element, add a class and manage it from the Custom CSS, if they are separated in more than a text block add a row inside the column and give that row a custom class from where you can access all the content within.
Hi Art, yes I'm trying to do the same with the text blocks. What I don't know is what the text blocks are called. I can give them a class name, but how do I reference it properly in the custom css?
For instance, the images are called ".wpb_single_image", what is a text block called? Or row?
The class for text columns is .wpb_text_column, if it does not work just add a class to it and let me know which class you have added so I can give you the exact CSS to access it.
Hi Art, I'm really happy with how the website is looking.
I have a question about the header logo. On the home page I have positioned the logo so that it can be seen against the photo, however on a mobile device it's up in the sky and difficult to see. www.dreamsmall.ca
How can I change the logo position on this one page for a mobile device? I need to move it down.
Hello,
I'm trying to build a site with offset images. I can easily this do in wpbakery, however if add an 80 px margin to a text box it may look good on a desktop, but bad on a mobile device. How can I make these text boxes and images have smaller margins on mobile, but retain the spacing on a desktop?
Thanks!
Hi AaronIsaiah,
This is a little bit complicated as WPBakery Page Builder does not have specific item padding/margin values for different devices, so I will try to explain you how you can achieve that.
Go to any single image you have added and edit it, there you will find the field to add a class, name each image with a class so we'll name it my-custom-class, then from the left WordPress sidebar go to Custom CSS > Responsive there you can add this CSS for desktop and then for mobile again in the fields you have there:
.wpb_single_image.my-custom-class { margin-top: 100px; margin-right: 110px; }Best regards,
Laborator Team
Hi Art,
I've tried this, following the directions exactly, but no changes happen to the image. It only seems to follow whatever value I put in for the margins through the front-end editor, not what I put in custom css. Am I putting the class name in the right box?
Thanks,
Hi Aaron,
The class is set fine and the margins are alright, the problem now is that you have set a 0 margin in WPBakery Page Builder element settings, leave it blank by default as the page builder settings will overwrite any CSS you type.
(view large version)
Best regards,
Laborator Team
Hi Art, that worked, thank you!
One more question about this, how do control the margins this way for text boxes?
Thanks,
Hi again,
I am not sure if I understood your question completely but as I could see you want to do the same as you're doing with the images with the text blocks:
(view large version)
So all you need to do is follow the same example for the text element, add a class and manage it from the Custom CSS, if they are separated in more than a text block add a row inside the column and give that row a custom class from where you can access all the content within.
Hope this helps.
Best regards,
Laborator Team
Hi Art, yes I'm trying to do the same with the text blocks. What I don't know is what the text blocks are called. I can give them a class name, but how do I reference it properly in the custom css?
For instance, the images are called ".wpb_single_image", what is a text block called? Or row?
Thanks,
Hi Aaron,
The class for text columns is .wpb_text_column, if it does not work just add a class to it and let me know which class you have added so I can give you the exact CSS to access it.
Best regards,
Laborator Team
Hi Art, it is working out great. Thanks!
Happy to hear that Aaron, have a great day
Best regards,
Laborator Team
Hi Art, I'm really happy with how the website is looking.
I have a question about the header logo. On the home page I have positioned the logo so that it can be seen against the photo, however on a mobile device it's up in the sky and difficult to see. www.dreamsmall.ca
How can I change the logo position on this one page for a mobile device? I need to move it down.
Thank you!
Hi again,
Can you please explain where you would like to move the logo, vertically or horizontally? If possible please include a screenshot.
Best regards,
Laborator Team
Hi Art, I would like to move in down, vertically, just on mobile. See this screen shot.
Thanks,
Sorry, there was a typo there - I would like to move the logo down.
Thank you
Hi there,
I can give you the CSS code for that but it's not a good idea to move the logo below as it can cause you problems on other pages, here you go:
.header-logo.logo-image { top: 380px; }Paste this CSS to Custom CSS > Responsive > Extra Small (XS).
Best regards,
Laborator Team