I had created this section of about us 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
Topic summary
Issue: A Sidekick-generated “About Us” section looks correct in preview but appears misaligned on the live site using the Atelier 2.1.6 theme (screenshot provided).
Cause:
- Sidekick creates content, not theme-aware layouts.
- After saving, Atelier’s grid, widths, and spacing override the preview.
- Rich text sections are particularly prone to mismatches.
Recommended fixes (in order):
- Use the right section type: avoid plain Rich text or Custom liquid; instead use Image with text, Multicolumn, or Text columns (these are styled/responsive in Atelier).
- Clean formatting: use proper H2/H3 headings (not bold), remove extra line breaks, and avoid mixing multiple content types in one text block.
- Constrain width via CSS: e.g., .section-about-us .rte { max-width: 1200px; margin: 0 auto; } (replace .section-about-us with the real section class; “.rte” is the rich text area).
- Verify desktop vs mobile settings: align padding, column count, and alignment per breakpoint in Atelier.
Status: Guidance provided; no confirmation from the original poster yet, so resolution is pending.
You can always ask it to improve the design, however, there is a chance your lose something else 
You can’t see it in “Edit theme” because the site width is limited there and your section cover it entirely.
This can be fixed with this code added to the “Custom CSS” setting of this section:
.layout-panel-flex.layout-panel-flex--column {
align-items: center;
}
Or this,
if want to add it elsewhere
(In “theme settings”=>“custom css”, or your stylesheet asset file)
.layout-panel-flex:has([class^="ai-about"]) {
align-items: center;
}
Hey @raridesign
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
div#shopify-block-AVDBGZnpabGFLaGxZd__ai_gen_block_c6006e7_BmFycP {
width: 100% !important;
}
</style>
RESULT:
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
Thank you for the solution
1 Like
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.
Cheers,
Moeed