Is there a way to change values of padding for mobile only in bulma css framework?

Question

So I built a website using Bulma css framework. I set the padding-left and padding-right for every element to 10%. On a mobile device the padding needs to be smaller. Maybe a 5% or less it doesn't matter. But I don't know how to change that padding for mobile devices only. I didn't find help in their documentation. Can someone help? For example:

nav{    
    padding-left: 10%;
    padding-right: 10%;
}

That I want to be:(but only for mobile devices)

nav{    
    padding-left: 5%;
    padding-right: 5%;
}

Answer 1

You can use media queries in css for assigning classes to specific devices. Please refer this

Example for mobile device:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .mobile-device {
        //styles for mobile
    }
}