Media query in vue js


#1

hi i am using media query in my vue project as i used it in normal css but it doesn’t work
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.search .btn-secondary {
right: 100px;
}
}
this code from a component i import it in the main component ,thanks


#2

Did you place this code in the <style></style> section of your Vue component?

Also, please wrap your code in three backticks (`) above and below to format the code correctly.


#3

yes it’s in <style></style> section sure

/* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) {
            .search .btn-secondary {
            right: 100px;
            }
    }

#4

So if you shrink the screen between 768px and 979px, the changes aren’t reflected?

Are you sure that you’ve loaded this component correctly? What happens when you replace the code to:

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
  * {
    background-color: #f00;
  }
}

Does everything have a red background color?


#5

no ,there is no effect happened


#6

And you’re sure that you import and use your Vue component correctly? This should no matter what set the background color of all your elements to red when the viewport comes between 768 and 979px. How do you import, attach and use that component?


#7

that’s how i imported it

      <app-main-header></app-main-header>
       <b-container fluid>
          <b-row>
               <b-col cols="2">
                  <app-side-bar>

                  </app-side-bar>
               </b-col>
               <b-col cols="10">
                     <app-location></app-location>
               </b-col>
          </b-row>
       </b-container>
    <app-footer></app-footer>
  </div>
</template>

<script>
import MainHeader from './compenets/mainCompents/Header1';
import SideBar from './compenets/mainCompents/SideBar';
import Location from './compenets/singelCompents/Location';
import Footer from './compenets/mainCompents/Footer';
export default {
  data () {
    return {

    }
  },
  components:{
    appMainHeader:MainHeader,
    appSideBar:SideBar,
    appLocation:Location,
    appFooter:Footer
  },

}
</script>

<style>

</style>

#8

and that’s how i used media query from component i have imported

/* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { .search .btn-secondary { right: 110px; } }