Customizer: mobile styles are overwritten by desktop styles

Hi there,

I've set the width and height of the menu items in the customizer for desktop (30,40). Works. Then I changed width and height for mobile devices by clicking the small mobile icon in the customizer (20,60).
But this doesn't take effect on frontend. The styles for mobile (20,60) are there, but are overwritten by desktop styles (30,40):

.main-navigation .main-nav ul li a, 
.menu-toggle, 
.main-navigation .mobile-bar-items a {
    padding-left: 30px;
    padding-right: 30px;
    line-height: 40px;
}

overwrites

.main-navigation .main-nav ul li a {
    padding-left: 20px;
    padding-right: 20px;
    line-height: 60px;
}

Shouldn't there be any media query here?

Thanks