Responsive Class for CSS

BB Theme
1

Hi Guys,

I am a convert from Artisteer to Beaver Builder & BB Theme. It’s been a great change and allows me to be much faster and creative at theming.

With ARtisteer, I was able to add a “.responsive” or “.responsive-tablet” etc. class before a class I wanted to only edit for the responsive design of the template. However, I am not finding that easily with the BB theme.

Does such a system of responsive classes exist with the BB Theme?

Thanks!

2

Hey Andy,

I am wondering if our built in responsive settings would work for you. You can set the breakpoints in the Tools menu while in the BB editing interface and each module/column/row also contains several responsive settings you can test typically found in the advanced tab. In terms of a global responsive class, the theme is Bootstrap based so you can use all of their default responsive classes if you like.

Best,
Billy

3

Thanks Billy, but how might I go about knowing what those classes are?

Sorry to be such a noob…

Andy

4

Here you go, Andy - http://getbootstrap.com/css/#responsive-utilities.

Best,
Billy

5

Billy,

OK, I see the link you sent me says this “For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.”

I don’t want to hide content by device. I want to apply a different CSS style to content based upon the media query that’s currently in effect (based upon device size). I don’t see how these will help me.

6

Hey Andy,

Sorry about that, I realize that wasn’t quite what you were after and after doing a bit of research on my end, I don’t think there is a global responsive class you can use unfortunately. Sorry about that.

Best,
Billy

7

To assist with your media queries, here is blog post of the theme CSS classes and also module CSS classes. Hope that helps!

8

Thanks Billy,

I think that should be added to your roadmap. I’m not sure how other devs do it, but that’s key to my workflow. See the bottom of this page for details about how Artisteer handles that:
http://www.artisteer.com/Default.aspx?content_id=newsletter_2012_10_4&p=c

I may have to go back to an Artisteer template to achieve this (ack!)