Blog page banner, author, date/time design issues

[bstock98]

Problem:

My initial issue was changing a color background to an image in the blog banner area for the post page. When changed to a picture the sizing of the image was messed up, and the blog title, and author were not visible.

Here is the link to that previous thread:

https://community.hubspot.com/t5/Content-Design-Questions/Author-no-longer-appears-on-blog-post-codi...

When I was able to (somewhat) fix the issue, by changing Z-index, and various small changes, I was still unable to have the title and author appear in all window sizes. Once the window is smaller than desktop size, the title and author of the blog post gets cut off by the post area below.

Needs:

I need to get the Blog post page to fit in all browser window sizes, and be responsive in sizing and spacing. I also need to make the Author info not appear on the listing page, but only on the post page.

Below is all of the code associated with these problems. First is the actual module for the Banner area, followed by the stylesheets I made and attached to partly remedy the situation.

Blog banner area Module:

{% if is_listing_view %}
<div class="banner-area" style="background-image:url();">
<div class="banner-image content-fill">
<img src="//cdn2.hubspot.net/hubfs/4515283/SignumBiosciences_July2018%20Theme/Images/SITE-EXPORTS_0012_FULLBLEED-02.jpg" alt="The Science of Staying Healty Blog">
</div>
<div class="page-center">
<h1>{{ group.public_title }}</h1>
</div>
</div>

{% else %}
<div class="banner-area" style="background-image:url();" style="background-color:#fff;">
<div class="banner-image content-fill" style="height:auto;">
<img src="https://cdn2.hubspot.net/hubfs/4515283/COVER%20IMAGES/SITE-EXPORTS_0007_ELEMENTS%20BG-1.jpg" alt="The Science of Staying Healty Blog" max-width="100%" height="auto">
</div>
<div class="page-center">
<h1>{{ content.name }}</h1>
<p class="date-sec">{{ content.publish_date_local_time.strftime('%b') }} {{ content.publish_date_local_time.strftime('%d') }}, {{ content.publish_date_local_time.strftime('%Y') }}</p>
<div class="banner-author">
<span class="hs-author-label">by</span>
{% if content.blog_post_author %}
<a class="author-link" href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a>
{% endif %}
</div>
</div>
</div>
{% endif %}

CSS fixes for Author, Date, and time:
.hs-blog-post .banner-area p.date-sec {
font-family: aaux-next;
font-size: 20px;
font-weight: 200;
text-transform: none;
font-style: normal;
letter-spacing: 3px;
line-height: 1.57em;
margin: 0;
z-index:9;
position: relative;
background-attachment: fixed !important;
text-decoration: underline;
}

.hs-blog-post .banner-area a.author-link {
color: #fff;
background-color: transparent;
text-decoration: underline;
font-family: aaux-next;
font-size: 20px;
font-weight: 200;
text-transform: none;
font-style: normal;
letter-spacing: 3px;
line-height: 1.57em;
text-align: center;
z-index:9;
position:relative;
line-height: 1.57em;
display: inline-block;
}

CSS Banner Image Fix:

.banner-image.content-fill {
background-color: #fff;
position: initial;
top: 50000;
left: 0;
right: 0;
bottom: -2500;
overflow: hidden;
}

.banner-image.content-fill img {
font-size: 0px;
left: 0px;
top: 0px;
width: 100%;
height: fit-content;
position: initial;
transform: translate3d(0px, 0px, 0px);
}

Author Info Module:

<div class="about-author-sec row-fluid">
<div class="span2">
<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}">
</div>
<div class="span10">
<h3>Written by <a class="author-link" href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a></h3>
<p>{{ content.blog_post_author.bio }}</p>
{% if content.blog_post_author.has_social_profiles %}
<div class="hs-author-social-section">
<div class="hs-author-social-links">
{% if content.blog_post_author.facebook %}
<a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a>
{% endif %}
{% if content.blog_post_author.linkedin %}
<a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
{% endif %}
{% if content.blog_post_author.twitter %}
<a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a>
{% endif %}
{% if content.blog_post_author.google_plus %}
<a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>

I hope that you guys have a little more luck than I do!

Thank you for the help.

[tjoyce · Accepted solution]

@bstock98 - I'm going to try and explain what's happening as best I can. Feel free to ask questions if you need to. 

So, your blog content is NOT actually cutting off the banner image. The banner image is just resizing based on the screen size and since the background of that container is white and the background of the blog post is white and the tet in the hero section is white, it gives the appearance that the blog post container is cutting off the image and lettering. That is not what's happening. 

What's actually happening? When you shrink the screen, the width of the image shrinks which means the height of the image shrinks. This reveals the white background. If you truly want to have that image in the background, you need to use css "background:url();" instead of an image tag. 

However, here is a css hack to get your <img> tag to have the appearance of a background image:

 body .banner-image.content-fill img{
  position: absolute;
  top: 50%;
  left: 50%;

  width: auto;
  height: auto;

  max-height: none;
  max-width: none;

  min-height: 100%;
  min-width: 100%;

  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[bstock98]

Thank you so much! 

That CSS fix worked perfectly!