CMS Development

grantfoster
Contributor

Your favorite way to put responsive columns INSIDE of a rich text module

SOLVE

Hi there,

I have a blog that I am working on and need to put three responsive columns INSIDE of a rich text module. I don't want multiple templates for this blog if I don't have to have them. Anybody have a quick - lightweight way to put 3 columns similar to the .span4 class behavior INSIDE of a rich text module?

 

Thanks!

 

EDIT: I've set up a 'row-fluid' div and thrown three 'span4' divs in there. gonna test and post if the functionality works or is skewed - this could be my solution.

0 Upvotes
2 Accepted solutions
Jsum
Solution
Key Advisor

Your favorite way to put responsive columns INSIDE of a rich text module

SOLVE

@grantfoster,

 

Are you needing to be able to change the number of columns?

 

Hubspots structural framework is based on a stripped down version of twitter bootstrap 2. If you need help understanding how it works you can find tutorals for bootstrap 2 and learn anything you need to know about Hubspot's template structure. For instance .span# will work, but .span classes work inside of two wrappers, .container and .row. Check out the source code to your site and you will see these classes and .span# inside them. 

 

I would suggest using a custom module. You can use the bootstrap structure, or flexbox (my current favorite for columns), and set up rick text modules in each column. What this is going to do is keep the structural code from being messed with on the editing page. If you use a rich text module to set up your columns, your structural code can be edited on the page so it can be broken. You don't want that. 

 

You can aslo  just use a Custom HTML module in your template and do the same thing that you would do with a custom module, only you would need to use the HubL docs to find the modules you want to use. After you set up your html the HubL for this is really just copy and paste.

View solution in original post

Jsum
Solution
Key Advisor

Your favorite way to put responsive columns INSIDE of a rich text module

SOLVE

You needed to put it in the middle of a blog post!?! Yeah, I think you did what you were able for the situation then. It looks good too. I'd imagine this section won't be on every post or need to be edited now that your done with it, right? I'd say your good to go. Hopefully the blog won't need to be edited. In my experience, if it can break the content marketers will break it. 

View solution in original post

0 Upvotes
4 Replies 4
Jsum
Solution
Key Advisor

Your favorite way to put responsive columns INSIDE of a rich text module

SOLVE

@grantfoster,

 

Are you needing to be able to change the number of columns?

 

Hubspots structural framework is based on a stripped down version of twitter bootstrap 2. If you need help understanding how it works you can find tutorals for bootstrap 2 and learn anything you need to know about Hubspot's template structure. For instance .span# will work, but .span classes work inside of two wrappers, .container and .row. Check out the source code to your site and you will see these classes and .span# inside them. 

 

I would suggest using a custom module. You can use the bootstrap structure, or flexbox (my current favorite for columns), and set up rick text modules in each column. What this is going to do is keep the structural code from being messed with on the editing page. If you use a rich text module to set up your columns, your structural code can be edited on the page so it can be broken. You don't want that. 

 

You can aslo  just use a Custom HTML module in your template and do the same thing that you would do with a custom module, only you would need to use the HubL docs to find the modules you want to use. After you set up your html the HubL for this is really just copy and paste.

grantfoster
Contributor

Your favorite way to put responsive columns INSIDE of a rich text module

SOLVE

Hey - 

Actually I am dealing with a blog that has one column for the body because that's where I parked the {{ content.post_body }} token. I actually put some row-fluid divs and the combination of spanx columns that I needed and it seems to be working alright - but I haven't really tested it that hard.

 

peek here: https://www.accelerance.com/blog/mobile-app-development-cost the divs in question are about halfway down the page.

0 Upvotes
Jsum
Solution
Key Advisor

Your favorite way to put responsive columns INSIDE of a rich text module

SOLVE

You needed to put it in the middle of a blog post!?! Yeah, I think you did what you were able for the situation then. It looks good too. I'd imagine this section won't be on every post or need to be edited now that your done with it, right? I'd say your good to go. Hopefully the blog won't need to be edited. In my experience, if it can break the content marketers will break it. 

0 Upvotes
grantfoster
Contributor

Your favorite way to put responsive columns INSIDE of a rich text module

SOLVE

Yes @Jsum -  I think that the information about it being in a blog post was important for this post! Sorry haha. Yes - I am the sole content manager at this firm so this is not built for scalability. I should really comment it up now that you mention it.

Thanks for the replies as always!

0 Upvotes