https://community.hubspot.com/t5/CMS-Development/Blog-listing-page/m-p/242531#M10314 <P>Hey Everyone,</P><P>&nbsp;</P><P>We'd like to update our blog listing page at blog.trint.com and <A href="https://blog.trint.com/trint-news" target="_blank">https://blog.trint.com/trint-news</A>. At the top of the page there is a carousel that rotates with our latest blogs. This carousel has three layers: the bottom layer is a zoomed-in version of the blog's featured image, on top of that is a semi-transparent white box, and&nbsp;the top layer&nbsp;is the title of the blog post.&nbsp;</P><P>&nbsp;</P><P>We'd like to separate the title and image and have them displayed side by side (eliminating the semi-transparent box altogether). Here is the custom HubL code for our blog's listing page:</P><P>&nbsp;</P><PRE>&lt;div class="featured-post listing owl-carousel" &gt; {% set topic_posts = blog_recent_posts('5511414059',3) %} {% for topic_post in topic_posts %} &lt;div class="postlist-items cf" style="background:#D8D8D8 url('{{ topic_post.post_list_summary_featured_image }}');height:375px; background-size: cover; background-position: center;"&gt; &lt;div class="tbl"&gt; &lt;div class="tbl-cell"&gt; &lt;div class="slider-inner"&gt; &lt;div class="tbl"&gt; &lt;div class="tbl-cell"&gt; {% if topic_post.tag_list %} &lt;p id="hubspot-topic_data"&gt; {% for tag in topic_post.tag_list %} &lt;a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}"&gt;{{ tag.name }}&lt;/a&gt;{% if not loop.last %},{% endif %} {% endfor %} &lt;/p&gt; {% endif %} &lt;h4&gt; &lt;a href="{{ topic_post.absolute_url }}" title="Post Title"&gt;{{ topic_post.name }}&lt;/a&gt;&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; {% endfor %} &lt;/div&gt;</PRE><P>&nbsp;</P><P>Any help would be very appreciated. Thanks everyone!</P><P>&nbsp;</P><P>&nbsp;</P><P>Michael</P> Mon, 17 Dec 2018 14:16:21 GMT michael_trint 2018-12-17T14:16:21Z