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 issue2. Blog "Category Page" Issue (This is the Civics category page)3. Rich Text Module and Styles4. Rich Text Module content code5. Listing Template code6. The "Subscribe To Our Blog" link styles
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:
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…
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!
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..2. Please REMOVE the "Subscribe" element from the subsequent category pages.
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!
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:
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…
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!