Responsive table?

[fmckeon1]

Hi, 

I'm trying to create a Related Posts section for my blog - https://info.ourladyofsorrowsschool.org/blog/.

I used Tables to set this up. However, I quickly discovered that the table isn't responsive - (see bottom of this post - https://info.ourladyofsorrowsschool.org/blog/social-conflicts-at-school-how-to-dial-down-the-drama-i...).

I searched for a fix, and found this link - https://community.hubspot.com/t5/Content-Design-Questions/Mobile-Responsive-Tables-on-COS-pages/td-p...

I tried following the process outlined by the second commenter (stefen), but it didn't seem to work.

Does anyone have any suggestions for how to make my table responsive? Alternatively, is there another (relatively easy) way to set up my Related Posts content so that it's responsive? (My coding skills are novice level.)

Thanks in advance.

FM

[louiegerodiaz · Accepted solution]

Hello FM,

I'm rather new to the HubSpot Community, but even so, I love helping out people using my relative knowledge in HubSpot (as well as some developer skills). Allow me to share my idea on fixing your problem:

First off, I have noticed that you built the table on a Rich Text Module. As this solution uses some HubL codes, it might be better to use a Custom HubL Module instead.

That said, here's my first attempt.

{% set pop_posts = blog_popular_posts('default', 4) %}

<div class="responsive-post-popular">
    
    <h3>Popular Posts - OLS School Blog</h3>
    
    {% for pop_post in pop_posts %}
    <div class="row-fluid">
        <div class="span3">
            <img src="{{ pop_post.featured_image }}">
        </div>
        <div class="span9">
            <a href="{{ pop_post.absolute_url }}"><h4>{{ pop_post.name }}</h4></a>
            <h6>{{ content.author_name }}</h6>
        </div>
    </div>
    {% endfor %}
    
</div>

<style>
    .responsive-post-popular {
        background-color: #ededed;
    }
    .responsive-post-popular img {
        width: 100%;
        height: auto;
    }
</style>

As mentioned in HubSpot's designer documentation, they are using a framework called BootStrap 2 in building up the layouts and I've used it to arrange each block of the posts.

Let me know if this works and would be happy to help you out further if needed.

Thanks and happy coding!

Kind regards,

Louie

[louiegerodiaz · Accepted solution]

Hello FM,

I'm rather new to the HubSpot Community, but even so, I love helping out people using my relative knowledge in HubSpot (as well as some developer skills). Allow me to share my idea on fixing your problem:

First off, I have noticed that you built the table on a Rich Text Module. As this solution uses some HubL codes, it might be better to use a Custom HubL Module instead.

That said, here's my first attempt.

{% set pop_posts = blog_popular_posts('default', 4) %}

<div class="responsive-post-popular">
    
    <h3>Popular Posts - OLS School Blog</h3>
    
    {% for pop_post in pop_posts %}
    <div class="row-fluid">
        <div class="span3">
            <img src="{{ pop_post.featured_image }}">
        </div>
        <div class="span9">
            <a href="{{ pop_post.absolute_url }}"><h4>{{ pop_post.name }}</h4></a>
            <h6>{{ content.author_name }}</h6>
        </div>
    </div>
    {% endfor %}
    
</div>

<style>
    .responsive-post-popular {
        background-color: #ededed;
    }
    .responsive-post-popular img {
        width: 100%;
        height: auto;
    }
</style>

As mentioned in HubSpot's designer documentation, they are using a framework called BootStrap 2 in building up the layouts and I've used it to arrange each block of the posts.

Let me know if this works and would be happy to help you out further if needed.

Thanks and happy coding!

Kind regards,

Louie

[the_emily_b]

Hi there! I'd like to do the same thing but I can't seem to locate the Cusom HubL Module. Am I missing something?

[lgerodiaz]

Hi @the_emily_b,

The Custom HubL module is now being replaced by creating a Custom Module instead but they still have the same functionality. You can do that by creating a new file in the design manager and select it from the options.

Hope this helps!

[fmckeon1]

Louie - thank you so much for your help! The changes are much closer to what I need. Would you be able to help me with a few add'l edits?

This is what I'm hoping for...

And, here is what the HubL code that you sent looks like...

 

1. Is there a way to add padding all around (so the images and headlines are a little indented from the edges)?

2. Can we change the headline link color to blue (instead of black)?

3. Is there a way to add the author names and titles (like in the orginal example)?

Thank you very much!

FM

[louiegerodiaz]

Hello FM,

I'm glad I could help you out! Anyhow, try this revised code - this should answer your follow-up questions.

{% set pop_posts = blog_popular_posts('default', 4) %}

<div class="responsive-post-popular">
  
  <h3>Popular Posts - OLS School Blog</h3>
  
  {% for pop_post in pop_posts %}
  <div class="row-fluid">
    <div class="span3">
      <img src="{{ pop_post.featured_image }}">
    </div>
    <div class="span9">
      <a href="{{ pop_post.absolute_url }}"><h4>{{ pop_post.name }}</h4></a>
      <h6>By {{ pop_post.author_name }}</h6>
    </div>
  </div>
  {% endfor %}
  
</div>

<style>
  .responsive-post-popular {
    background-color: #ededed;
    padding: 1em;
    margin-bottom: 1em;
  }
  .responsive-post-popular img {
    width: 100%;
    height: auto;
    margin-bottom: 1em;
  }
  .responsive-post-popular > div {
    margin-bottom: 1em;
  }
  .responsive-post-popular > div:last-child {
    margin-bottom: 0;
  }
  .responsive-post-popular > div * {
    margin-top: 0;
  }
  .responsive-post-popular h4 {
    color: #08c;
  }
</style>

Let me know if this works to your liking.

Kind regards,

Louie

[fmckeon1]

Louie - even better! Only one remaining issue - the person who posted the article (i.e. me) is showing as the "author." Is it possible to change to the actual author? You can see the actual authors on this page - https://info.ourladyofsorrowsschool.org/blog

Thank you very much!

FM

[louiegerodiaz]

Sweet! As for the article author, you could change it anytime by following this guide from HubSpot.

Thanks.

[fmckeon1]

Sorry, Louie. I wasn't being clear. The author info is correct in HubSpot. And, when you view the blog articles, the correct authors are displayed.

My issue is that the author info isn't displaying correctly in the Popular Posts box. Instead of picking up the "author" info, it's picking up the person who posted the article.

For example, this article (https://info.ourladyofsorrowsschool.org/blog/volunteering-with-habitat-for-humanitys-global-village-...) was written by Barbara McCarthy. The article correctly shows this, but the Popular Post box says that it's written "By F McKeon." For some reason, the box is not pulling the correct Author data. Can this be fixed? 

[louiegerodiaz · Accepted solution]

Hi FM,

Thanks for clearing it up! And I do apologize as well, as I was under the impression that the one who uploaded would be the author.  Would you kindly try this code? I've just revised the line which displays the correct one. 

{% set pop_posts = blog_popular_posts('default', 4) %}

<div class="responsive-post-popular">
  
  <h3>Popular Posts - OLS School Blog</h3>
  
  {% for pop_post in pop_posts %}
  <div class="row-fluid">
    <div class="span3">
      <img src="{{ pop_post.featured_image }}">
    </div>
    <div class="span9">
      <a href="{{ pop_post.absolute_url }}"><h4>{{ pop_post.name }}</h4></a>
      <h6>By {{ pop_post.blog_post_author.display_name }}</h6>
    </div>
  </div>
  {% endfor %}
  
</div>

<style>
  .responsive-post-popular {
    background-color: #ededed;
    padding: 1em;
    margin-bottom: 1em;
  }
  .responsive-post-popular img {
    width: 100%;
    height: auto;
    margin-bottom: 1em;
  }
  .responsive-post-popular > div {
    margin-bottom: 1em;
  }
  .responsive-post-popular > div:last-child {
    margin-bottom: 0;
  }
  .responsive-post-popular > div * {
    margin-top: 0;
  }
  .responsive-post-popular h4 {
    color: #08c;
  }
</style>

Kind regards,

Louie

[fmckeon1]

Louie - thanks so much for your help. Your suggestions worked perfectly!

FM

[coreysmith]

Material Design has a great approach to responsive tables.

materializecss.com

[fmckeon1]

Hi Corey,

Thanks for the quick response. I took a look at Materialize, and unfortunately, it seems a little too advanced for me.

My table is 1 column wide x 5 rows high

Row 1 contains the headline ("Popular Posts...") 

Rows 2-5 contain thumbnail images (flush left) and title/author info

Is there a way to modify the existing stylesheet and/or CSS to make it responsive?

Thanks.

[coreysmith]

Sometimes you can apply a table width of 100% but responsive web doesn't like tables. The best approach is to conver them all to <div> elements so they can be truly responsive (and appropriate).