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

Shopify Discussion
1

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
IMG_BC257A00AD0C-1.jpeg1170×2532 396 KB

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

Thanks!

2

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 tag

Moeed_0-1691518111253.png
Moeed_0-1691518111253.png281×506 43.7 KB

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

Best Regards,
Moeed

1 Like
3

Amazing!! Thanks so much!!

4

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.

5

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.png
amycaslee_0-1720627608377.png517×805 43.9 KB

amycaslee_1-1720627671838.png
amycaslee_1-1720627671838.png1885×738 65.3 KB

6

Hey @amycaslee

Share your Store URL and Password if enabled.

Best Regards,

Moeed

7

@Moeed https://shopkidsplaysets.com/blogs/news/a-new-era-of-play-empowering-young-minds-through-play

Thank you!

8

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 tag

RESULT:

Moeed_0-1720628246187.png
Moeed_0-1720628246187.png375×671 51.9 KB

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

Best Regards,
Moeed

1 Like
9

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

10

Hey @amycaslee

Keep the previous code and add this new code above in the end of theme.liquid file

.article-template header {
    max-width: 95% !important;
    text-align: -webkit-center !important;
}

RESULT:

Moeed_0-1720629144274.png
Moeed_0-1720629144274.png357×781 82.8 KB

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

Best Regards,
Moeed

1 Like
11

@Moeed Thank you so much, extremely helpful!!

12

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.