Requesting help for mobile padding solution

On my website https://taskforce626.com on the homepage in mobile view, the top row siteorigin widget and bottom row siteorigin widget have unwanted padding on the left, right and bottom side is there any CSS that can be added to resolve this?

Please note that all widget & row design/layout padding is set to zero.

-Thanks in advance.

Hi,

For the top padding try to add this css :

.sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container .sow-slider-image-wrapper {
padding-top: 0px;
}

For the bottom padding try to add this css :

aside#siteorigin-panels-builder-2 {
margin: 0px;
}

Otherwise, if you’re using elementor page builder plugin (warmly recommended ;), you can set differents margins, paddings, etc… (for desktop, tablet, mobile) by clicking in the dedicated widget style tab, on the grey rounded icon at the right of the targeted style titleyou want to modify.

Hope that helps

Bossanovation

The issue im having still wasnt resolved with that CSS, the issue im trying to resolve is in mobile view where this content below is not being fully displayed in mobile view, and the background image appears to have some sort of padding on the left, right, and bottom of this row.

Capture

Capture

same issue displayed on the top row aswell, not sure why this is happening.

Hello,

Try to use the following CSS code and remove negative row margins.

You can add CSS code in Customize → Additional CSS section.

body.page-template-page_front-page #content > .container.content-wrapper {
    padding: 0;
}

body.page-template-page_front-page #content > .container.content-wrapper > .row {
    margin: 0;
}

body.page-template-page_front-page #content > .container.content-wrapper > .row .panel-grid-cell {
    margin-bottom: 0 !important;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support