Fine tuning mobile css within a theme


First let me say I just started using Beaver Builder and I love it. I see a great future with this tool.

My first project using BB is kind of right into the deep end. All of the content is tightly integrated to fit precisely over a background image. I made it so each section can flex in height to accommodate a single column, so the structure is good. On a desktop it looks great. My problem is that the automatic mobile settings for small screens do not put things where I need them to be to maintain the design. I have tried both editing the style.css file and adding mobile phrasing into the css add-on box in the customizer, but neither of those methods changes the outcome at all.

What is the best way for me to tweak the placement of objects for small screens?


Brett Nickell

Hey Brett,

Welcome to the BB forums! And glad you’re loving BB! :slight_smile:

You’re best bet is by using Media Queries. You can read more about that on the link below.

Basically, what it does is it allows you to assign specific CSS properties to elements based on the width of the device the site is being viewed. We have a CSS snippet for changing the background of a row when on mobile. You might want to check on that and use it as reference. :slight_smile:

Let us know if you need anything further! :slight_smile:


Thanks for your quick response Ben!

Regrettably the information you have cited is for too general to be of much help, but then again I guess my question was too general for a specific answer.

I do know how to write css for mobile devices, my problem is that my including it in either of the two areas where one could add it to a BB template had no affect on the design, which leaves me a bit confused. I will try to be more specific this time.

I need to change the vertical positioning of specific items on mobile devices, not the standard column width stuff. Going to a single column layout for mobile causes the text to be misaligned with the backgrounds and I need to move the text lower to match up. I gave those items an ID tag in the ‘advanced’ menu within BB. When I added css modifiers to be triggered at a specific screen size such as: #ProductSection {padding-top: 50px;} nothing happens.

I have added css both to the customizer’s css slot, and via the editing tool and neither had any effect on positioning.

Based on that, here are some specific questions:

Can an element I tagged through the builder column menu such as “#ProductSection”, instead of an inherent BB object like: .fl-content .first-row etc. be repositioned by css override at all?

Would it be better to use a class instead of an ID to get things moving?

Hey Brett,

It’s possible your CSS isn’t quite correct in what you are trying to do. Would you mind shooting us temp admin access as well as the specific column or row we should check out while referencing your CSS and the ID your using? You can toggle the private reply option below.


[Content Hidden]

Hey Brett,

There are a few errors on how you were declaring your media queries. First, it requires the word and after screen like so, @media screen and {}. Second, you were setting min-device-width vs min-width. The main difference is, by using the former, you won’t be able to see the CSS being applied by just squeezing the browser to a specific width. More information here - I haven’t really used min-device-width, I always go with min-width. I tried playing around with your site and by fixing the error and using min-width, the CSS applies perfectly. I just had to undo my changes since I didn’t want to ruin anything.

Hope this makes sense.


Thanks a ton Ben for your help! It always comes down to something ridiculously simple and I end up looking like a fool. It’s funny, I have used that css statement in question many times with no trouble at all in other authoring tools. Oh well, whatever works and I am back in business.

The goodness of Beaver Builder is rivaled only by it’s customer support!

Have a great day.