Margins on Posts for Mobile
Hello,
I have not technically made this blog live yet but will soon. Before I do, I need to make sure it looks good on mobile too: https://www.costellolawfirm.com/blog
The margins on the post are at 100px – I have tried to write CCS to change this and it works while am using the browser Developer Tools to test it, but it is not working when I publish the site and view it live on my mobile devices. (I did empty the cache but it still did not work)
Appreciate any advice you can give. Thanks so much!
Comments
Hi,
Can you attach a screenshot showing it, please?
I do not want to misunderstand you.
Thanks
I think this will make it clearer/easier: https://www.loom.com/share/ee23c569fd5d4c1ba16c5552d0ff9b1e
Thank you!
The padding is the same for all devices, so if you set it for desktop on mobile it will be the same.
You need to create a copy of this section, and the one with the padding set should be visible for desktops and tablets, and the one without the padding for mobile.
Thanks
I don't have Responsive Options in any of my dialog boxes.
I also don't know how this would apply to the individual posts since this is a global setting. Post pages are created to fit in the template and aren't individually styled like my other pages content so I don't know how I have control over that without writing custom CSS.
Please, put the following CSS code in Betheme -> Theme options -> Custom CSS & JS -> CSS.
@media only screen and (max-width: 767px){ .wpb_wrapper .vc_custom_1657567125511{ padding: 20px 0!important; } }Thanks
That worked! I did have to add a Custom ID tag to the blog landing page for that to work but all is fixed now.
Thanks so much for all of your help!
You are welcome.
Please, let me know if I can help you with anything else.
I also strongly recommend checking out BeBuilder. Already thousands of our customers moved from other builders in favor of Be one.
Best regards