Spacing Problem in Mobile View

Hello,

I am having an issue and trying to decrease some spacing in the mobile view. It is on the services page. Please see the screenshot below.

I would like to decrease the spacing above the title “Nutrition: Discover a healthy relationship with food”. Thank you!

Justin

Hi Justin,

Please try to add this CSS code below to remove that space:

#pg-191-1.panel-has-style > .panel-row-style, 
#pg-w5b3635f86b4b3-1> .panel-row-style {
	padding-bottom: 0px !important;
}
#pl-191 .panel-grid-cell{
	margin-bottom: 0 !important;
}

Put the code into customize > additional CSS

Regards,
Awan

Hi Awan! Thank you for the help. Is there a way to keep a bit more spacing in the desktop version, but then decrease the spacing only in mobile?

It would be nice on a desktop to have a bit more space. Please let me know if that is possible. Thank you!

Justin

Hi,

Yes… you can replace the code in above with this:

@media (max-width: 768px){
   #pg-191-1.panel-has-style > .panel-row-style, 
   #pg-w5b3635f86b4b3-1> .panel-row-style {
	padding-bottom: 0px !important;
   }
   #pl-191 .panel-grid-cell{
	margin-bottom: 0 !important;
   }
}

Regards,
Awan

Great it worked! Thank you Awan!

1 Like