Fixing our blog listing

[SMohiuddin]

After changing some fonts on our webpage, we noticed a formatting issue on the following pages:

• https://www.notarize.com/blog
• https://www.notarize.com/knowledge-center 

Now the padding is way off , and the buttons at the bottom are formatted incorrectly. The page numbers are vertical instead of horizontal. We are unsure why these changes occurred because we only changed the fonts, not the padding.

We're fairly certain the issue is related to a certain style sheet. We think there's a missing bracket or some other syntax error causing this. I was advised by HubSpot support that the issue may lie in the coding below. HubSpot tried to change the padding, but something was overriding their changes. 

/* -------- Structure -------- */
.header-container-wrapper, .body-container-wrapper, .footer-container-wrapper {}

.header-container,
.footer-container,
.body-container .panel > div {
max-width:{{ maxWidth }};
float:none;
margin:0 auto!important;
padding:0 30px;
}

.panel {padding:{{ panelPad }};}

/* -------- Header -------- */
.header-container-wrapper {
background:{{ accent1 }};
padding:27px 0;
position:relative;
top:0;
left:0;
width:100%;
z-index:999;
}

.header-container {position:relative; max-width:none;}
.header-container .row-fluid {
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
-webkit-align-items:center;
-moz-align-items:center;
-ms-align-items:center;
align-items:center;
}

Does anyone know where I can start with solving these issues? Thank you!

[josh_dev]

I would also recommend using truncate on the descriptions to help keep the design more uniform.

{{content.post_summary|striptags|truncate(95, true, '...')}}

Are you still having issues with the CSS, I wasn't noticing anything else off with the listing page.

[miljkovicmisa]

Hello @SMohiuddin and thank you for writing, I did notice some weird horizontal overflows on your website and some issues with the paddings but could not spot the issues you mentioned, for example the numbers of the paging seem to be horizontal like in the screenshot and there appears to be nothing wrong with the buttons except the one that has a bit larger svg icon that pushes the text.
Could you post some screenshot of the issues you are seeing so we can correlate them with specific css?

Here is a screenshot of the website as I can see it in my browser [Chrome 92.0.4515.159 (Official Build) (64-bit) on windows] (you could use that screeshot to point out the problems)

Also make sure you are removing cache from your browser as you are rewieving changes, sometimes things get stuck, I would strongly reccommend the hubspot developer chrome extension found in this link when working with templating in hubspot, it is very handy and includes (besides other useful things) a tool for removing cache from a hubspot page by adding a ?hsCacheBuster={some_random_number} parameter in the url which eventually creates a new instance of that page you are viewing.

If my answer was helpful please mark it as a solution.