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:
Desktop
Mobile
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?
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
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.
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:
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