Section not showing properly on mobile

Support
#1

Hi guys,

I’ve used CSS to add padding in a few sections on my site but it looks like it’s affecting how it looks on mobile. I just don’t know enough to fix it.

Can you tell me how to adjust the padding for mobile only so that I can handle any other issues that may come up in addition to this one.

You’ll see it here: dawnmartinello.com about half way down.

Thank you!

#2

Hello There,

Thanks for writing in! When you add a padding or margin or any other inline css to a section, row, column or any other element, that will affect both desktop and mobile screens. To prevent that from happening, you will have to add a custom css that will remove the padding or margin in mobile screens. In your case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
  .page-id-2516 #x-content-3 {
    padding-left: 0;
    padding-right: 0;
  }
}

I have included a page ID so that it will be a page specific css and will not affect any other content bands in your site.

Hope this helps. Please let us know how it goes.