Mobile Spacing problem

Hello,

I am having some spacing issues with the mobile version on the Services page. I would like to achieve two things:

1.) I would like to decrease the space between the “Person Training (In-Person)” heading and the picture below it.

2.) I have a table (“Number of Sessions”…) that becomes oddly spaced in mobile view. I would like it to be centered like the rest of the content if possible.

The site is kristinrenefitness.com

Thank you!

1

Add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    #panel-w5b3635f86b4b3-0-0-0 .widget-title {
      margin-bottom: 0 !important;
    }

2

Try using responsive table plugin instead of default one.

Regards,
Kharis

Hi Kharis,

Thank you for the helpful information! Regarding the table is there a way that I can just use CSS (rather than adding a plugin) to ensure that the table is centered in mobile view? Please let me know. Thank you as always!

Justin

Hello Justin,

Try this CSS code:

@media only screen and (max-width: 500px) {
  .fitness-table {
    font-size: 16px;
  }
}

Regards,
Kharis

Hi Kharis,

I have tried this but it still is not working. It seems that their is extra space on the left side of the table.