Hi - I have no coding experience, so hoping someone might have an easy fix for me. I created a new page and cannot figure out how to make it mobile (and even tablet) friendly. I essentially want the page to stay the same, but on mobile all of the text overlaps. The header and theme seem to be mobile friendly but the content is not (even though the smart rules are set up). Here is the page: halodx.com/publications
Is there something I can add to all pages moving forward to make them mobile friendly?
The issue here is that you've applied some negative margins to some of your drag and drop sections. Negative margins force content out of its usual position and can be tricky to use as a non-developer.
When you click into a "Section" on your drag-and-drop page, on the sidebar under "Alignment and spacing", you'll see a "Padding and margin" section:
HubSpot Section - Alignment - Padding and Margin
If you click into the "Margin" tag and remove those negative margins you shouldn't have the overlapping issue anymore. In general, avoid adding negative numbers here.
You'll then have a lot more space on your page:
Spacing on the page
But you can minimize that in a few ways:
Instead of using "Sections" for each row, drag everything into the same section using rows to separate the headers/data
Decrease the padding between sections
Another option for a publications page like this would be to have a developer build you a custom module that uses fields or a HubDB table so that you can just add in the data and it'll format it automatically, but it might only be worth the cost if you see this scaling by a good bit in the future.