CMS Development

GreggPTX
Member

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

SOLVE

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

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE
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
Anton Bujanowski Signature

View solution in original post

4 Replies 4
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

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

SOLVE

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.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
GreggPTX
Member

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

SOLVE

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
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE
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
Anton Bujanowski Signature
GreggPTX
Member

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

SOLVE

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

 

Gregg