Broken Blog Post Pages on Dawn Theme

[Hazed]

Hello guys, I'm building a store on the standard Dawn theme and I noticed there's some sort of a bug when I view the blog posts. The navigation links change to a different font, and also the borders on the page shrink, mainly the header which is breaking the whole navigation layout. i'm fine with the post's text and image being this size but I'd want the navigation bar to be the same size as everywhere else. I installed a fresh version of Dawn with no code edited and the issue still persists. Here's the examples:

Regular page Width & Navigation Font 👇👇

 

Page Width & Navigation Font on Blog Post (Article) 👇👇

It's looks like it's half the width it's supposed to be. In advance many thanks!

 

 

[Hazed]

Sure, here is the link: https://u0cr2v-ua.myshopify.com/

The access code tothe webiste is: 1234

[TheScriptFlow_]

Hey @Hazed,

Could you please share your store URL and password [if applicable] so that I can take a look and provide you with a solution code.

Looking forward to hearing back from you.

Thanks

[Hazed]

Sure, here is the link: https://u0cr2v-ua.myshopify.com/

The access code to the webiste is: 1234

[TheScriptFlow_]

Please paste the code in the end of base.css file.

.page-width {
    max-width: 160rem !important;
    margin: 0 auto;
}

Results:

[Hazed]

what your showing is the blog collection page, What i have the problem with is the actual article page.

[Hazed]

Try using this link: https://u0cr2v-ua.myshopify.com/blogs/ufo-conspiracy-theories/were-ufo-sightings-in-the-1950s-cover-...

[TheScriptFlow_]

Hey @Hazed,

I can see the issue on the provide Blog post. Can you please paste the following code in the end of base.css file.

body {
   max-width: 100% !important;
}

Results:

[Hazed]

Thank you! I been ripping my hair out for 2 days trying to sort it out and turns out it was so simple xD. That solves this issue, but do you know how i can make the font of the navigation links the same as on other pages too? Its only this page that shows up differently for some reason.

[TheScriptFlow_ · Accepted solution]

I am happy that I could fix the issue.

Now in order to make the font-family same on the header of blog page you need to paste the following code in the end of base.css file.

.link, .customer a {
  font-family: Kreon, serif !important;
}

Results:

If my replies helpful, then don't forget to like this post, mark as solution and Buy me a Coffee.

[Hazed]

Thank you man you're a legend 🙏❤️