Normally I just use the inspector (google or mozilla) to find the class I need to make a change and make those changes using custom css or the child style.css. Since it is not possible to use inspector to find mobile classes my question is, how to do that or is there a list somewhere for the mobile classes. I’m still a little new at this and brand new to BB so any easy help is very appreciated. For instance I need to adjust the margins above and below my main menu but on mobile phones, not desktops. I have searched quite a bit and find interesting snippits but nothing that I can use to actually help me make this happen. Thanks much for the help.
Hey Mark,
The plugin adds the fl-builder-mobile class to the body tag when your site is viewed on mobile so you can target that first + your other selectors.
Alternatively, we have an auto spacing feature where margins/padding on mobile are reset to default. You can check out Justin’s reply for more info on that.
Lastly, you can media queries to set styling for when the viewport reaches a certain width. You can check out this article for more info on that as well. 
Ben
Thank you for your quick answer. I’ll study these links and get back if I need.
One thing. When you say “your other selectors”. Is there a selector list or are these found using the inspector or something else. (sorry I am just learning this) Very much appreciate your help and direction. Mark
P.S. If you would point me to a post that shows the use of selectors in a snippit? Would be very helpful for me.
P.S.S Justin (Danny) replied to Yaron, “please, see my reply to your other topic. My suggestion should work for you.” That post is not available on this page, do you know where it is so I can read what actually worked for Yaron because his answer was, “Thanks, Danny. That other ticket resolved the issue.”
By the way for the most part I love BB and when I learn how to manipulate it… WOW can’t wait!
Ok… disabling the autospacing helped alot. But I still need to adjust margins/paddings for mobile viewing. On my S4 the header image is squeezed above and there’s to much spacing below the slider. My url test/build site is a-cman.com. Please take a look and offer me suggestions how to adjust these margins. I prefer to use my style.css in the child-theme but I’m open to all suggestions. Really appreciate your help. Thanks again. Mark
P.S. I tried adding this to my style.css but it made no changes. I set the values way out only so I would know for sure whether it was working or not. I am missing something to make it work, what am I missing?
@media (min-width: 0px) {
.fl-builder-mobile {
background: black;
margin-bottom: -50 !important;
padding: -30px;
margin-top: -20px;
}
}
Hey Mark,
The class fl-builder-mobile gets added to the body tag. You’re gonna have to use the dev tools inspector tool to check for which element you need to assign the styles to, and that’s what I meant by + other selectors.
Sorry to say but we don’t really have a post showing all of the classes our page builder uses, but you can check out the Theme/Plugin CSS Snippets section of our KB for samples.
Theme CSS Snippets
Plugin CSS Snippets
Re your site, did you want to add a different image when it’s viewed on mobile? If so, an easier way to do that would be to set your current row to show only on large/medium devices. This can be set under the Advanced tab of a row/column/module, under Responsive Layout. Then create a new row, set it to show only on small devices under the same section, then do the layout how you want it to be seen on mobile view.
Hope this helps!
Ben
Excellent links thanks and info thanks. I’ll check them out.
Could you possibly give me an example code/snippit of changing a header margin and or changing a menu top or bottom margin please or point me to one so I can see/understand how to use the mobile selector(s) better. Thank you again.
Hey Mark,
Can you share the URL of the site so we can check?
Ben
I posted it in reply 100839. My url test/build site is a-cman.com.
I understand the basics of css, it’s the MOBILE part I am trying to get clued in to.
A snippet or two adjusting MOBILE device margins my site would go along way to helping me.
Thanks again.
Hey Mark,
Sorry for missing the link! It wasn’t set as such so I didn’t notice. Okay, so which part of the site do you want to adjust the margin on mobile view? I’d be happy to point you to the right direction in term of CSS.
Ben
if you look at the site in a mobile phone mode, show me how you’d add some margin space between the ‘welcome to’ image (of the guy with the flag) and the slider above it. That’s all I think I need for now, once I see how that’s done I should be albe to figure out the rest (hopefully 
)
Thanks, Mark
Hey Mark,
This is one way to do it and I prefer using it as well.
@media (max-width: 767px) {
.front-page-menu-row .fl-row-content-wrap {
margin-bottom: 30px;
}
}
Hope this helps!
Ben
This is my 3rd attempt at posting. I don’t know if you realize but your site logs the user out way too early. In trying to properly explain a problem it can take an hour or two to go through all the motions. Then I send the message but there is no warning that I’ve been automatically logged out and the work that was done be lost unless you copy it or something. Very disheartening. Ok one more time but this time, since this it the 3rd time costing me 4 hours today I won’t try to pay so much attention to detail. Maybe you can request that the hang timeout be increased a bit?
1st, thanks for the code snippet above.
2nd, my About page menu’s horizonal width in relation to the slider below changes with the size of the page. [ http://a-cman.com/about/ ] I have tried moving the menu module in and out of rows etc but it still does it. I have a very similar setup on my Home page without problems. How do I correct this please.
3rd Since I have set the Theme Header option to Disable, How do I add a Menu to the BLOG page? [ http://a-cman.com/blog/ ] ? I have tried several things but can’t get one to work properly.
Thank you again.
Mark