Blog post title is wrong

[KRISTIAN-KRISTI]

My blog post is in the middle when sitting on phone.

What is wrong and how do I fix it?

Care guide

[Nordalux]

The article header is in a header section. See image. This must be removed first.

Then you need to insert the following CSS code into your base.css (or similar):

.article-template__title {
text-align: center;
}

After that, it looks like this:

[shopplaza_team]

Dear @KRISTIAN-KRISTI

I have checked your blog post. I think adding the following style code will make the post look much better:

...
header.page-width.page-width--narrow {
    position: relative !important;
    text-align: center !important;
}

.article-template__content.page-width.page-width--narrow.rte {
    text-align: justify !important;
}
...

Let me know if you encounter any other difficulties.

Regards,
Eric from Shopplaza

[Dan-From-Ryviu]

Please add this code to Custom CSS in Theme Settings to solve the issue

.article-template header { position: relative !important; max-width: max-content !important; }

Result

---

Best regards,

Dan from Ryviu: Product Reviews App

[merfdotapp]

Hello @KRISTIAN-KRISTI . I was able to replicate the issue on macOS. Rather than just forcing the styles, I’d suggest tweaking the tag layouts. It’s a fast fix if you know your way around Liquid, but feel free to reach out if you’d like me to handle the code for you. cheers!

[tim_tairli]

You have this code added which positions your blog header to the left.

header {
    position: absolute !important;
    max-width: 100% !important;
    width: 100% !important;
}

If this code was added by you then the question is whether this was your original intent?

Could be that it was for some other purpose (like to modify the site header), but the header selector is too generic so it targets other element, thus – side-effects.
You can avoid this if you use a stronger selector in your CSS rule, like this:

sticky-header header {
  position: absolute !important;
  max-width: 100% !important;
  width: 100% !important;
}

If this was the original goal, then probably you should add a media query to convert it back from position: absolute on narrower screens, like this:

@media (min-width:1280px) {
 article header {
   position: absolute !important;
   max-width: 100% !important;
   width: 100% !important;
 }
}

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it