custom padding on mobile

Hello guys, i’m building my website with siteorigin builder, and it’s so great!
All perfect on desktop and tablet, but now i’m having some trouble on mobile phone.

I’ve a row with 2 coloumn, 1 editor and 1 hero image.
I’ve 100px padding top, 100 bottom, 100 right and 100 left on the editor (right coloumn of the row)

On desktop all it’s perfect. But on mobile it cause a too large white border. So i need a custom padding (around 5px left and right should be good) when you are under specific resolution.

How can i do this? i tried with something like:

@media (max-width: 680px) {
.customm-padding {
padding-rigt: 5px;
padding.left: 5px;    
}
}
}

but seem not working (i’m pasting this on “custom css plugin” and add “custom-padding” to widget “editor” attribute tab).

Thanks in advance