Padding on Desktop and Tablet, But Padding Lost on Mobile?

SOLVE
GreggPTX
Member

Hi all,

 

I'm fairly experienced with HTML and web design, but kind of lost when it comes to CSS stuff and the like, so please be patient and use small words <snicker>. I am fine with editing and tweaking CSS, but tracking down specific issues is not my forte.

 

Briefly, I had a Hubspot designer build me some custom templates and modules last year for a website relaunch effort. One of the custom modules he created (a flexible columns module) has good left/right edge padding for layout on desktop or tablets, but no padding at all when the same content is viewed on mobile.  Here are the previews of the pages from within the CMS -- viewing them live has the same results: 

 

DesktopDesktop

 

 

 

 

 

 

 

 

 

 

 

MobileMobile

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I've poked around the various CSS associated with the page, but frankly I'm lost and nervous about tweaking things without really understanding the potential outcome. Can someone give me some idea of where I need to start in identifying the specific code that affects just the mobile layout of this particular module?

 

Thanks,

 

Gregg

CSS
0 Upvotes
1 Accepted solution

Accepted Solutions
Anton
Solution
Key Advisor | Diamond Partner
Hi Gregg,

Seems that the class "md-container" overrides the default container padding.

You can either change the padding of the class from
35px 0
to
35px 15px

Or create a new class with the desired paddings and a media query so that the class will only be active on certain view points. If you do this - don't forget to add the class to the group/module

Best, Anton



check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

4 Replies 4
Kevin-C
Recognized Expert | Partner

Hey @GreggPTX 

 

I was writing out a "how-To" for the developer tools in your browser, but I think it would be much faster if you could provide us with a live link to the page to take a look. This way we can help solve it and then explain the solution so you can use that knowledge in the future.

GreggPTX
Member

Hi Kevin! thank you so much for the guidance -- and yes, I would much rather you guide me through it so I don't have to ask twice! Here's a link to the page in question:

 

https://www.rfcode.com/rf-code-for-core-data-centers-how-it-works?hs_preview=ofRefcqR-29983331530

 

Thanks again!

 

Gregg

0 Upvotes
Anton
Solution
Key Advisor | Diamond Partner
Hi Gregg,

Seems that the class "md-container" overrides the default container padding.

You can either change the padding of the class from
35px 0
to
35px 15px

Or create a new class with the desired paddings and a media query so that the class will only be active on certain view points. If you do this - don't forget to add the class to the group/module

Best, Anton



check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

GreggPTX
Member

That did the trick -- thanks for helping me track it down!

 

Gregg