Broken Blog Post Pages on Dawn Theme

Store Design
1

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 :backhand_index_pointing_down: :backhand_index_pointing_down:

Normal.png
Normal.png2539×1128 568 KB

Page Width & Navigation Font on Blog Post (Article) :backhand_index_pointing_down: :backhand_index_pointing_down:

Hazed_0-1748858555647.png
Hazed_0-1748858555647.png2538×1129 292 KB

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

2

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

3

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

The access code tothe webiste is: 1234

4

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

The access code to the webiste is: 1234

5

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

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

Results:

TheScriptFlow_0-1748861715102.png
TheScriptFlow_0-1748861715102.png1898×972 373 KB

6

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

7

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

8

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:

TheScriptFlow_0-1748862768973.png
TheScriptFlow_0-1748862768973.png1920×839 305 KB

9

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.

10

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:

TheScriptFlow_0-1748866528525.png
TheScriptFlow_0-1748866528525.png1913×240 154 KB

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

11

Thank you man you’re a legend :folded_hands: :heart: