CMS Development

RyanPatterson
Contributor | Platinum Partner
Contributor | Platinum Partner

Are there css classes from breakpoints like in other responsive frameworks

SOLVE

Hello,

 

So I'm pretty new to building hubspot templates, and have no prior expereince with Bootstrap 2. I have used Bootstrap 3 and Zurb's Foundation. So I do have plenty of experience with responsive design. 

 

Does anyone know of any css classes I can use to specify the stacking/column widths at certain breakpoints. For example in Bootstrap 3 you can use something like class="col-md-6 col-lg-4". Which anyone who is familiar with Bootstrap 3 would know that the column would span 6 on medium screen size,  4 on large screens and then 12 on small. 

 

It seems in the COS responsive grid it only stacks on small screens. I can't seem to find anything in the hubspot docs about this nor the Bootstrap 2 docs. 

 

While I can achieve what I want to using css media queries, I was hoping to not to have to spend a bunch of extra time doing that. 

0 Upvotes
1 Accepted solution
Jsum
Solution
Key Advisor

Are there css classes from breakpoints like in other responsive frameworks

SOLVE

@RyanPatterson,

 

You should look up the documentation to Bootstrap2 because it is more basic than Bootstrap3. You don't use col-size-number your class is instead span1-12 and all spans are changed to 100% at 768px wide. Much more basic. 

 

Also Hubspots frame work is derived from Bootstrap2. It's basically a stripped down version with some minor alterations such as "container" is "row-fluid-wrapper" and "row" is "row-fluid". Little things. 

 

Your best options is to get familar with Hubspots frame work structure (use the inspector on a Hubspot template) and then write some custom css that works with it instead of against it. 

View solution in original post

0 Upvotes
1 Reply 1
Jsum
Solution
Key Advisor

Are there css classes from breakpoints like in other responsive frameworks

SOLVE

@RyanPatterson,

 

You should look up the documentation to Bootstrap2 because it is more basic than Bootstrap3. You don't use col-size-number your class is instead span1-12 and all spans are changed to 100% at 768px wide. Much more basic. 

 

Also Hubspots frame work is derived from Bootstrap2. It's basically a stripped down version with some minor alterations such as "container" is "row-fluid-wrapper" and "row" is "row-fluid". Little things. 

 

Your best options is to get familar with Hubspots frame work structure (use the inspector on a Hubspot template) and then write some custom css that works with it instead of against it. 

0 Upvotes