All things Shopify and commerce
Hi there,
Trying to change the width of a blog post in mobile view as currently the text/body of the post is being cut off at the edges making it extremely difficult to view. Using the beyond them and the site can be found here:
https://cruxleyfieldgoods.com/blogs/news/lightweight-solar-panels-and-battery-banks
It looks fine on a desktop but when viewing from a mobile device it looks like the screenshot below.
Any help on how to change this/what code to change would be much appreciated.
Thanks!
Solved! Go to the solution
This is an accepted solution.
Hey @cruxleyfieldgoo
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>
.article--content {
max-width: 80% !important;
}
</style>
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This is an accepted solution.
Hey @cruxleyfieldgoo
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>
.article--content {
max-width: 80% !important;
}
</style>
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Amazing!! Thanks so much!!
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.
Hi @Moeed - can you please help me here? I have input this code, but the page width on mobile is still too narrow. I believe I may have contradicting code? I like the page width on desktop currently, but would like to widen the content on mobile view. Thank you!
Hey @amycaslee
Share your Store URL and Password if enabled.
Best Regards,
Moeed
Hey @amycaslee
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>
@media screen and (max-width: 767px) {
.article-template__content.page-width.page-width--narrow.rte {
margin: 0 !important;
max-width: 95% !important;
}
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hey @amycaslee
Keep the previous code and add this new code above </style> in the end of theme.liquid file
.article-template header {
max-width: 95% !important;
text-align: -webkit-center !important;
}
RESULT:
If I managed to help you then, don't forget to Like it.
Best Regards,
Moeed
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025