Extra padding behaviour in mobiles for Hero images

I have been observing this behaviour that extra padding space is displayed on both sides of images when loading the webpage in mobile devices. The below code suggested as a solution last time was not working.

    #pl-32 .panel-grid-cell {
          padding: 0 !important;
    }

Please check the below link : This is not published yet, I am testing before updating the homepage.

http://www.venkatspb.in/uft

Thanks,
Venkat

Hello there,

I found that the #pl-32 selector doesn’t to present in your homepage. Which section would you like to apply the style on? What does the text read? Or share a screenshot, if possible.

Regards,
Kharis

http://www.venkatspb.in/uft

Please open the above testing link in mobile phone and you will understand the space on both edges of images. If you could help on this, that would be of great help.

Thank you
Venkat

Hello Venkat,

Try this code and add it to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 780px) {
  #pgc-3351-0-1 > div {
    margin-left: -15px;
    margin-right: -15px;
  }
}

Let me know how it goes.

Regards,
Kharis

This code worked for only one section. I tried to duplicate the home page but still the mobile behaviour remains same.

Is there a global setting for mobile devices? Or do I have to add code every time I create a new page?

Please suggest.

Please open the links below in mobile and you will understand the problem.

www.venkatspb.in/dirtyhands
www.venkatspb.in/uft
www.venkatspb.in/unfailing

Thanks,
Venkat

Hello Venkat,

Try this code:

    @media only screen and (max-width: 780px) {
    .panel-grid-cell > .widget_sow-image {
        margin-left: -15px;
        margin-right: -15px;
      }
    }

Regards,
Kharis

This solution worked for two pages -
www.venkatspb.in/launch
www.venkatspb.in/unfailing

and did not worked for the below one

www.venkatspb.in/uft

Any suggestions please?

Thanks
Venkat

Hello Venkat,

Try adding this CSS code:

    @media only screen and (max-width: 780px) {
      .panel-cell-style > .widget_sow-image,
      .panel-grid-cell > .widget_sow-hero {
        margin-left: -15px;
        margin-right: -15px;
      }
    }

Regards,
Kharis