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%;
}

Does this answer your question? [Responsive Design](https://stackoverflow.com/questions/20515880/responsive-design) — Alon Eitan, Jul 22 '21 at 10:35

score 1 · Answer 1 · answered Jul 22 '21 at 12:10

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

score 0 · Answer 2 · answered Jul 25 '21 at 16:59

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.

score 0 · Answer 3 · answered Jan 02 '23 at 04:20

0

Example with Sass mixin

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

@include mobile {
  nav {
    padding-left: 5%;
    padding-right: 5%;
  }
}

Named mixins

answered Jan 02 '23 at 04:20

Sasha Stadnik

502
1
6
16

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

3 Answers3