How to make pages in Dawn theme, wider on mobile?

Store Design
1

I have a couple of pages (using the standard page template) on my website that appear correct on desktop but are ridiculously narrow on mobile:

dawn-mobile-narrow.jpg
dawn-mobile-narrow.jpg384×682 19.4 KB

A feeding guide, which uses an inserted table, (originally from excel), here:
https://www.proudihk.com/pages/proudi-feeding-guide
And a store location guide, which includes images and embedded Google maps, here:
https://www.proudihk.com/pages/proudi-stockists

I need help to make these pages display properly on mobile.

Thanks,

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.page-width.page-width--narrow.section-template--15558975226042__main-padding {
max-width: inherit;
padding: 0 1.5rem;
}
3

Hi ZestardTech,

Thank you so much for you swift response. Unfortunately, it did not work. I wonder however if this is because I had already added the following code to base.css, to fix a similar display issue for the desktop view:

.page-width.page-width–narrow {
max-width: 150rem;
padding: 12rem 12rem;
}

Is it related?

For mobile side, I was anticipating the solution to start with ‘@media screen…’ but maybe that’s just my limited knowledge…

Regards,

UPDATE: my apologies, it did work! On mobile those pages do now display much better, (I previously tried out the solution on a preview page which didn’t work for some reason). However, it has altered the way those same pages are displayed on the desktop view, stretching them to the very edge of screen.

Is there a way to separate these two display methods?

4

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.