Landing Page - mobile responsiveness (margins and padding)

[digitalfilipa]

Hello!

Is there any way where the changes made in padding/margin styles are not reflected in mobile devices? My landing page is looking OK in desktop with margins changes, but unfortunately these changes look all mixed up in mobile:

https://tech.sun-evo.com/?hs_preview=brhahdJo-21053451397

Since HubSpot landing pages require some advanced knowledge in coding, I kindly ask for your help!

Thank you,

Filipa

[daveroma]

Hi @digitalfilipa - I'm looking at a few layout issues on your site for mobile; here are some tips on how to fix them:

Hero:

How to fix:

Find the following media query in your style sheet and reduce the font-size (36px worked well for me)

@media (max-width: 767px)
  .banner-text h1 {
    font-size: 36px;
  }
}

 

Result:

Content covering unordered list

How to fix:

Remove margin-top

Footer Padding:

How to fix:

Add padding to the .custom-footer-bottom class like so:

.custom-footer-bottom {
  padding: 0 15px;
}

Result

There are some other isssues but these fixes should put you in a good place on some of the more obvious ones - hope this helps!

--

David Roma | Drive Agency

[digitalfilipa]

Hello David Roma | Drive Agency,

I highly appreciate time you took looking at this!

First issue is solved, thank you 🙂

Removing the margins is suitable for mobile, but there is too much space between the modules/elements in desktop version. Here is a prevew link of the icons module with -50px top margin:

https://app.hubspot.com/content/6357974/edit/21053451397/preview

Do you have any suggestion to remove spaces without making changes in the margins?

Thank you so much once again

Best,

Filipa

[daveroma]

A media query will most likely be required to only apply the styling on mobile screensizes - if you'd like, shoot me an email to set up a quick video chat and we can knock this out: droma@driveagency.co

--

David Roma | Drive Agency