How to change page width on blog post mobile view in Beyond Theme

Solved

How to change page width on blog post mobile view in Beyond Theme

cruxleyfieldgoo
Tourist
6 0 3

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. IMG_BC257A00AD0C-1.jpeg

 

Any help on how to change this/what code to change would be much appreciated. 

 

Thanks!

 

Accepted Solution (1)

Moeed
Shopify Partner
4400 1134 1392

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>

Moeed_0-1691518111253.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 11 (11)

Moeed
Shopify Partner
4400 1134 1392

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>

Moeed_0-1691518111253.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
cruxleyfieldgoo
Tourist
6 0 3

Amazing!! Thanks so much!!

Moeed
Shopify Partner
4400 1134 1392

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.

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
amycaslee
Tourist
8 0 0

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!

amycaslee_0-1720627608377.pngamycaslee_1-1720627671838.png

 

Moeed
Shopify Partner
4400 1134 1392

Hey @amycaslee 

 

Share your Store URL and Password if enabled.

 

Best Regards,

Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Moeed
Shopify Partner
4400 1134 1392

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:

Moeed_0-1720628246187.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
amycaslee
Tourist
8 0 0

Hi @Moeed thank you! Can I also edit the page width of the title section?

Moeed
Shopify Partner
4400 1134 1392

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:

Moeed_0-1720629144274.png

 

If I managed to help you then, don't forget to Like it.

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
amycaslee
Tourist
8 0 0

@Moeed Thank you so much, extremely helpful!!

Moeed
Shopify Partner
4400 1134 1392

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.

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️