How to add padding on MOBILE view only

Site URL: https://www.katielulei.com/

Does anyone have any suggestions on how to add padding to the left and right of blocks on the homepage on MOBILE ONLY? For some reason on the desktop versions the padding is great. But on mobile the spacing disappears and I don't like how tight the text blocks are to the border of the box. Advice will be appreciated!

13 hours ago, Ziggy said:

The reason is that on the desktop layout you have 24 columns and you are leaving blank columns and rows to act as padding, but on the mobile layout where you have 8 columns to use, you are not leaving any gaps. 

One solution would be to leave a blank column on the left and right, but that will narrow the text significantly.

Another solution would be to drag the "background" shape the full width of the screen on mobile so giving you some padding for the text.

You could use CSS, but only if you're comfortable with using it and keeping it up-to-date.

This would work as a start:

#block-57bfa4493feed0a6fa35, #block-yui_3_17_2_1_1683653009628_23651 {
  .sqs-block-content {
    padding:0 20px;
  }
}

If you need to do this to more blocks, then you may want to find more ID blocks, this method works well:

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

It worked! Thanks so much! The code is great! 🙌