CMS Development

gramirez
Contributor

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

SOLVE

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 issue1. Blog Page Re-size issue2. Blog "Category Page" Issue (This is the Civics category page)2. Blog "Category Page" Issue (This is the Civics category page)3. Rich Text Module and Styles3. Rich Text Module and Styles4. Rich Text Module content code4. Rich Text Module content code5. Listing Template code5. Listing Template code6. The "Subscribe To Our Blog" link styles6. The "Subscribe To Our Blog" link styles

0 Upvotes
2 Accepted solutions
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

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

SOLVE

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:

Screeenshot - 2020-12-18 at 3.51.52 PM.png

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:

Screeenshot - 2020-12-18 at 3.54.46 PM.png

 

 

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:

Screeenshot - 2020-12-18 at 4.01.09 PM.png

 

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

View solution in original post

Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

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

SOLVE

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 %}

 

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

View solution in original post

6 Replies 6
gramirez
Contributor

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

SOLVE

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..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.2. Please REMOVE the "Subscribe" element from the subsequent category pages.

0 Upvotes
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

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

SOLVE

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 %}

 

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
gramirez
Contributor

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

SOLVE

Good idea, thanks!

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

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

SOLVE

@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!
 

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
gramirez
Contributor

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

SOLVE

Thank you so much Kevin! I really appreciate it!

Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

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

SOLVE

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:

Screeenshot - 2020-12-18 at 3.51.52 PM.png

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:

Screeenshot - 2020-12-18 at 3.54.46 PM.png

 

 

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:

Screeenshot - 2020-12-18 at 4.01.09 PM.png

 

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev