I need help with a Blog page element not being responsive and positioned correctly on other pages.

[gramirez]

Blog page https://blog.socialstudies.com/

I’m an Entry-Level developer and need some assistance.

We have a custom “Subscribe To Our Blog” element on our HubSpot CMS Blog page (see attachments) and we’re having issues when we re-size the window (not responsive) and also when we click on other blog categories in the navigation (incorrect position on those pages) . Please see attached for more details.

1. Blog Page Re-size issue

2. Blog “Category Page” Issue (This is the Civics category page)

3. Rich Text Module and Styles

4. Rich Text Module content code

5. Listing Template code

6. The “Subscribe To Our Blog” link styles

[Kevin-C]

Hey @gramirez

Thanks for all the context, it makes things a lot easier.

First thing:

The site looks great! Newbie or not. You should be proud.

Second:

I see 2 major issues with the site and project as a whole:

1. You’ve structured you elemnts in a way that they aren’t following the Normal Flow, which HS relys upon.
   Now this isn’t a bad thing nor “wrong” but it does make visual positioning very difficult inan ecosystem like HS.
   This leads to the second issue, which you’re starting to experiencing right now…
2. Scalability will be excetionally difficult and manual moving forward if the first issue isn’t addressed.

To demonstrate I’ve removed the position: absolute and margin-bottom from the navbar and CTA. See below:

By removeing the absolute positioning, we can see that the Normal Flow is re-established, and those 2 elements are now in a very different position. They now look more like the normal document flow from the link above:

To be completely honest with you I think it would not only be best, but also easier to find a temporary quick fix and rebuild your layouts keeping the normal document flow in mind.

To build on that: in the drag and drop template builder you can see the “blocks” representeed buy the grey boxes. You can think of this as a visual representation of the normal flow which should help you understand that concept. See rough exmple below:

That was a lot adn I couldn’t get into a ton of detail so don’t get discouraged! Just a learning experience!

[Kevin-C]

@gramirez

Almost forgot about this article: Thinking Like a Front-end Developer

This is the kind of article I wish I would’ve had many years ago! Especially not having formal training in development! I think you’ll get quite a lot out of it!

[gramirez]

Thank you so much Kevin! I really appreciate it!

[gramirez]

Hey Kevin, I’m going to “retreat” from fixing the responsiveness of the “Subscribe” element for now. My priority is to get that element removed from the proceeding category pages (see attahced). I’m hoping there is an easy way to hide it when it shows up on those pages.

1. Blog Homepage (I would like to leave this “as is”). It’s ok if the “Subscribe” element is not responsive for now..

2. Please REMOVE the “Subscribe” element from the subsequent category pages.

[Kevin-C]

Hey @gramirez

You might be able to get a few more responses if you create another post for this, but to not leave you empty handed:

Without a ton of experience in the blog template markup, I can’t tell you that this will work.

But from the documentation I think its what you need!

Try the “if not simple_list_page statement”:

{% if not simple_list_page %}
 Iterated post markup for regular listing 
{% else %}
 <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}

[gramirez]

Good idea, thanks!