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
6736 1820 2202

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 11 (11)

Moeed
Shopify Partner
6736 1820 2202

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


cruxleyfieldgoo
Tourist
6 0 3

Amazing!! Thanks so much!!

Moeed
Shopify Partner
6736 1820 2202

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


amycaslee
Excursionist
25 0 9

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
6736 1820 2202

Hey @amycaslee 

 

Share your Store URL and Password if enabled.

 

Best Regards,

Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Moeed
Shopify Partner
6736 1820 2202

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


amycaslee
Excursionist
25 0 9

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

Moeed
Shopify Partner
6736 1820 2202

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


amycaslee
Excursionist
25 0 9

@Moeed Thank you so much, extremely helpful!!

Moeed
Shopify Partner
6736 1820 2202

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications