How To Change the Blog Posts Page's max-width to 1200px On Dawn Theme

Hi,

The original blog page width is narrow, I want to adjust the width of the page content to 1200px, is there any way to do that? please check the picture, I want the width of the text to be in the blue box.

Thank you so much.

Regards

Hi @Ajing ,

Could you share that page URL for checking?

Hi Dan,

Thank you for your prompt response, please check the URL

https://www.lilygo.cc/pages/join-us

Hi @Ajing ,

Please go to Online store > Themes > click 3 dots button > Edit code > Assets > base.liquid, add code at the bottom of the file

@media screen and (min-width: 990px) {
.page-width--narrow { max-width: 1200px !important; }
}

Please add below css code in bottom of assets/base.css file

@media screen and (min-width: 990px)

.page-width–narrow {
max-width: 1200px;

}
Thank you.

Thank you so much, but I can’t find base.liquid, just base.css

Please add below css code in bottom of assets/base.css file

@media screen and (min-width: 990px)

.page-width–narrow {
max-width: 1200px;

}
Thank you.

And I add the code you mentioned to base.css, no change.

Did you you code I mentioned? Did you click Save file and then reload your join us page?

Hi dear, thank you for your help, I added it, but no any change

Yes, I added and reload.

Hi @Ajing , please added my code below

@media screen and (min-width: 990px) {
.page-width--narrow { max-width: 1200px !important; }
}

Not code of @Denishamakwana

Sorry but I can’t find any change in base.css file

Please update code like this

@media screen and (min-width: 990px) {
.page-width--narrow { max-width: 1200px !important; width: 1200px !important; }
}

Hi @Ajing .

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can go to Online store => themes => actions => edit code and add this code on file base.css

.page-width--narrow { 
max-width: 1200px !important; 
}

Hope this answer helps.

Best regards,

Richard | PageFly

Hello @Ajing

I would like to give you some recommendations to support you

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

1 Like

Yes, I added the code you mentioned " @media screen and (min-width: 990px) {
.page-width–narrow { max-width: 1200px !important; }
}"

But not base. liquid, is base.css

Please change in base.css file line number 244 max-width: 1200px;

Hope it works.

Thank you.

Updated, but same

I checked it in my devise there is no any css is updated.

see attachment.