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

user_11295182 0
Viewed 1964

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%;
}
bulma css html
2 Answers

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
    }
}
user_163427870

Bulma has visibily helpers to show or hide elements depending on the device used (mobile, tablet, desktop, widescreen and fullHD).
You can apply the is-hidden-tablet class to your nav in HTML and use it like this in your CSS:

nav.is-hidden-tablet{    
    padding-left: 5%;
    padding-right: 5%;
}

to have a navigation menu displayed only on mobile with your custom padding. enter image description here

user_121714740
Related