Блог

Я хочу изменить отступ с px6 на мобильном устройстве на px8 на что-нибудь большее, чем 768 пикселей. поэтому я использую «md: px-8». Но, похоже, это переопределяет поведение мобильных устройств, когда ширина экрана меньше 768 пикселей? По сути, px-6 никогда не применяется. Кто-нибудь сталкивался / решал эту проблему? Спасибо.

в инструментах разработчика я всегда вижу (меньше или больше 768 пикселей)

 @media (min-width: 768px)
.md:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
and below:
.px-6 {
    padding-left: 1.5rem; <--- overriden (line in middle)
    padding-right: 1.5rem; <--- overriden (line in middle)
}
 

• Я пробовал в Chrome, Safari, Firefox.
• У меня есть meta name =»viewport»
  content =»width = device-width, начальный масштаб = 1.0″ на head
• Все классы работают, кроме отзывчивости.

 <template>
  <div class="flex flex-wrap flex-row">
    <div class="w-1/5 max-w-xs"></div>
    <div id="nav" class="bg-gray-900 w-1/5 max-w-xs h-screen px-6 py-8 md:px-8 fixed">
    <Navigation/
    </div>
    <div id="content" class="w-4/5 px-6 py-8 md:px-8">
      <router-view/>
    </div>
  </div>
</template>