CMS Development

Sydney
Member

Mobile Friendly Page

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?

1 Reply 1
Stephanie-OG
Key Advisor

Mobile Friendly Page

Hi @Sydney !

 

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 MarginHubSpot 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 pageSpacing 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.

 

I hope that helps!

 


Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

 

0 Upvotes