How to fix this blog post layout to center with full width

Store Design
, , ,

Topic summary

A user created a blog post section using Shopify Sidekick AI that displays correctly in the preview but breaks when saved and viewed on the live website. The layout issue appears to affect centering and full-width display.

Current Status:

  • Theme: Atelier 1.6
  • Issue includes an attached screenshot showing the broken layout
  • Two community members have responded requesting the store URL and password (if password-protected) to investigate further

Next Steps:

  • User needs to share store URL and access credentials for troubleshooting assistance
  • Discussion remains open pending this information
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

I had created this section of blog post using Shopify Sidekick AI by giving prompt - in the preview beside the prompt it is showing perfect layout but when I save the section and see the output on live website then it is showing up like this (image attached below). How to fix this? My theme is Atelier 2.1.6

Screenshot 2025-11-04 115422
Screenshot 2025-11-04 1154221920×920 344 KB

2 Likes
2

Hey @raridesign

Share your store URL and Password if enabled.

Best,
Moeed

3

Hi @raridesign

Kindly provide your store URL please and if it is password protected, please share the password as well.

Thanks!

4

Hey @raridesign,

In order to center the content of the blog post page and make it full width then you need to follow these steps.

Go to Shopify Admin >> Online Store >> Themes >> Customize >> Click on Rari Journal page >> Click on the first Blog of any Blog post >> Then inspect the specific section >> Click on that and right side scroll down and you will see a option name by Custom Css.

In the custom css paste the following code below.

.section.section--page-width.color-scheme-1 {
    padding-top: 0px;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}
.shopify-block {
    width: 100%;
}
article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

After pasting this in the Custom Css input then you will get this results.

results
results1913×830 179 KB

Here is the visual explanation on how to find the custom css settings in the theme customizer.

customize
customize1919×944 110 KB

custom-css
custom-css1919×946 206 KB

I hope that’s clear. If you still have any confusion or any Question then feel free to let me know.

And yeah, if this was helpful don’t forget to like it and Mark as Solution.

Thanks

5
1 Like
6
7

Hey @raridesign,

I want to know whether the above Solution works for you?

1 Like
8

Hey @raridesign

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
div#shopify-block-AaTI5TnZTWlhyNFU5K__ai_gen_block_10bfc46_G9MBkY {
    max-width: 100% !important;
    width: 100% !important;
}
.ai-blog-post-content-aati5tnztwlhynfu5kaigenblock10bfc46g9mbky {
    max-width: 100% !important;
}
header.ai-blog-post-header-aati5tnztwlhynfu5kaigenblock10bfc46g9mbky {
    text-align: -webkit-center !important;
}
</style>

RESULT:

image
image1443×916 213 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
9

Thank you, your solution helped me and now the blog post is looking exactly same what I wished to.

1 Like
10

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

11

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
div#shopify-block-AaTI5TnZTWlhyNFU5K__ai_gen_block_10bfc46_G9MBkY {
    max-width: 100% !important;
    width: 100% !important;
}
.ai-blog-post-content-aati5tnztwlhynfu5kaigenblock10bfc46g9mbky {
    max-width: 100% !important;
}
header.ai-blog-post-header-aati5tnztwlhynfu5kaigenblock10bfc46g9mbky {
    text-align: -webkit-center !important;
}
</style>
type or paste code here