Mobile view: how to remove right/left margin from the specific widgets?

Question

May I know how to remove right/left margin from the bottom two parts(Lessons and Fees,Contact) of my website on phone? It seems ok on PC but not on phone. Especially the table for prices lookes terrible.

https://www.japaneselessons-kanazawa.com

*I use Moesia theme. The first 4 widgets are called "Moesia FP"(guess their original widgets) and the rests are Siteorigin Editor/Form.

*I have installed 4 Plugins; Athemes Toolbox, Moesia - Masonry Portfolio, Page Builder by SiteOrigin, SiteOrigin Widgets Bundle. When I inactivate Page Builder by SiteOrigin, the margin problem is gone but all the Moesia original widgets desappears.

*I found some CSS online but didn't work.

I am very new to this kind of thing and have no idea what to do. mar Thank you!

Answer 1

You just need to add media queries for mobile screens.

Add CSS in the stylesheet.

if you want globally add this:

@media only screen and (max-width: 600px) {
  #pl-2040 #panel-2040-4-0-0, #pl-2040 #panel-2040-5-0-0 {
      margin: 0;
  }
}

If you want to implement only on the homepage try this:

@media only screen and (max-width: 600px) {
  .home  #pl-2040 #panel-2040-4-0-0, #pl-2040 #panel-2040-5-0-0 {
      margin: 1cm 1cm 1cm 1cm;
  }
}