CODEWITHSUNDEEP
htmlcssvue.jscomponentsmedia-queries
Olga B
Olga B

Reputation: 513

Vue.js: Cannot hide a div with a sidebar with CSS media queries

I tried to hide a div with my sidebar with this method:

/* For mobile phones: */
@media (max-width: 576px) {
 .sidebar {
  display: none!important;
 }
}

/* For tablets */
@media (max-width: 768px) {
 .sidebar {
  display: none!important;
 }
}

The sidebar listens to these rules but it seems like the content is disappearing but the <div> is actually staying. It might be like this because <div> with the sidebar is actually a component. But then I don't know how to solve it.

My page:

<template>
 <div>
  <sidebar />
  <main-content/>
 </div>
</template>

The sidebar component:

<template>
<div class="sidebar">
    <div class="sidebar-header">
      <div class="logo"><img src="../../../components/img/logo.svg"/></div>
      <a href="#" id="title">System</a>
    </div>
    <ul class="sidebar-nav">
      <!--<li><a href="#">Home</a></li>-->
      <!--<li><a href="#">Popular</a></li>-->
      <!--<li><a href="#">News and events</a></li>-->
      <!--<li><a href="#">Pages</a></li>-->
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/users.svg" />Users</a>
            <ul>
              <li class="nav-item"><a href="#">Import</a></li>
              <li class="nav-item"><a href="#">Invitation</a></li>
            </ul>
      </li>
      <!--<li><a href="#">Organisation</a></li>-->
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/polls.svg" />Poll</a>
      </li>
    </ul>
  </div>
</template>

Upvotes: 1

Views: 2168

Answers (2)

Olga B
Olga B

Reputation: 513

The problem was in CSS for a container with main content. It had left margin, so when the sidebar disappeared, it stayed at the same place, not taking the width of the removed sidebar.

Upvotes: 0

a--m
a--m

Reputation: 4782

Most probably your component styles are scoped. See the documentation how it works.

A posible solution is to move the style block to the component itself:

<template>
<div class="sidebar">
    <div class="sidebar-header">
      <div class="logo"><img src="../../../components/img/logo.svg"/></div>
      <a href="#" id="title">System</a>
    </div>
    <ul class="sidebar-nav">
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/users.svg" />Users</a>
            <ul>
              <li class="nav-item"><a href="#">Import</a></li>
              <li class="nav-item"><a href="#">Invitation</a></li>
            </ul>
      </li>
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/polls.svg" />Poll</a>
      </li>
    </ul>
  </div>
</template>

<style scoped>
/* For mobile phones: */
@media (max-width: 576px) {
 .sidebar {
  display: none !important;
 }
}

/* For tablets */
@media (max-width: 768px) {
 .sidebar {
  display: none !important;
 }
}
</stlyle>

Another solution is to declare a non scoped style block, this usually goes in your App.vue file.

Upvotes: 1

Related Questions