My blog posts have no margins

Store Design
, ,

Topic summary

A user reported that blog posts on their Shopify store lack proper margins, causing display issues on both desktop and mobile devices. They also wanted to adjust text size specifically for mobile.

Solution provided:

  • Add CSS code to base.css, style.css, or theme.css in the theme’s Assets folder
  • Set blog post width to 95% with auto margins for proper spacing
  • Use media query @media only screen and (max-width: 749px) to target mobile font sizing

Additional fix:
For the header text size issue, apply:

h1.article-template__title {
    font-size: 35px;
}

The solution was confirmed working with before/after screenshots showing improved margins and layout.

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

Hi everyone,

How can I fix this?? Looks bad on desktop and mobile.

Also, how to I change the text size on mobile only? Thanks

Website URL: https://07c55c-77.myshopify.com/

Pass: odeiff

Screenshot 2024-04-26 at 8.49.24 AM.png
Screenshot 2024-04-26 at 8.49.24 AM.png3092Ă—1366 414 KB

1 Like
2

Hi @Blueweb

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.page-width.page-width--narrow.section-template--22572521586990__main-padding, article.article-template {
    width: 95%;
    margin: auto;
}

And Save.

Result:

Made4uoRibe_0-1714139402279.png
Made4uoRibe_0-1714139402279.png1897Ă—693 46 KB

For the text size, do you mean the content? the header/ subheader. This one is for the content.

@media only screen and (max-width: 749px){
.article-template__content {
    font-size: 20px;
}
}

And Save.

Same instruction.

Made4uoRibe_1-1714139587575.png
Made4uoRibe_1-1714139587575.png625Ă—510 16.6 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

2 Likes
3

Thank you!

For the text size, I mean the header, sorry.

1 Like
4

No worries, check this code then.

h1.article-template__title {
    font-size: 35px;
}

And Save.

Same Instruction.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!