100% Width Padding: Issues with responsive layout options

Hi community,
So I am trying to change the padding on the left and right side of a blog post by varying the value for 100% Width Padding from the standard 30px value to around 300px. (Basically, I want more white space on my blog articles)

The issue I am facing is: When I change the value to 300px via Global Option >> Layout >> 100% Width Padding, the changes are effective for my desktop but on my mobile device, the blog post totally disappears. I can only see the heading of the post and none of the post text.

I tried changing the values on the page Global Option >> Responsive >> Element Responsive Breakpoints but nothing seems to work.

Any recommendations on how I can fix this? Do I just have to keep changing the breakpoints via trial and error till I find something that works?

My site width is 1200px. Small screen breakpoint Is 640px and medium screen breakpoint is 1024px.