How can I make my blog pages full screen?

Store Design
, , , ,

Topic summary

A Shopify store owner is experiencing an issue where blog posts display at only about one-third of the screen width instead of full width. Images are also constrained to the narrow text width and cannot be inserted wider.

Proposed Solutions:

Two developers offered CSS-based fixes:

  • Solution 1: Add CSS code targeting .article--inner with max-width: 100% !important; by navigating to Online Store → Theme → Edit code → theme.css file and pasting the code at the bottom.

  • Solution 2: Similar approach using .article--inner with max-width: 100% and an additional rule for .article--sidebar with position: relative !important;.

Both solutions involve editing the theme’s CSS file directly to override the default width constraints on blog article containers.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

My website is www.mglaser.com. I have noticed that whenever I create a new blog post, it is only about a third of the width of the screen. See screenshot below. How can I change this to be normal full screen width? I also am not able to insert pictures wider than the text, they will only go as wide as the text.

sarahmglaser_1-1702636672056.png
sarahmglaser_1-1702636672056.png1808×673 139 KB

https://c06dcr8xc2f8mjnd-4623929.shopifypreview.com/blogs/blogs/how-to-choose-a-nozzle-tip-for-your-laser

2

Hi @sarahmglaser

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

.article–inner {

max-width: 100% !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like
3

@sarahmglaser , add the below code to your theme’s CSS file.

.article--inner {
    max-width: 100% !important;
}
.article--sidebar {
    position: relative !important;
}
1 Like