CODEWITHSUNDEEP
cssmaterialize
vijay
vijay

Reputation: 244

How to change the default screen size of mobile view in materialize css?

<div class="row">
     <div class="col s12 m6 l6">

     </div>
</div>

default screen size for mobile view is <=600px in materialize css but how to increase this screen size as <=700px?

Upvotes: 1

Views: 1685

Answers (3)

Guillaume Globensky
Guillaume Globensky

Reputation: 11

You check in the _variables.scss in the component folder of their library. Hit ctrl+f then type Media Query Ranges. You'll be able to set the limits you want.

Upvotes: 0

Bhuwan
Bhuwan

Reputation: 16855

If you want to override your materialize css then you have to use media query for this like in your custom css file which should be defined below your materialize.css file

@media only screen and (min-width: 701px){
  .s12{
    width:100%
  }
  .hide-on-small-only{
    display:none;
  }
  /* other css...    */
}

Upvotes: 1

Saurabh Mistry
Saurabh Mistry

Reputation: 13679

find all lines in your materialize.css file ,

@media only screen and (min-width: 601px)

and replace it with below :

@media only screen and (min-width: 701px)

Upvotes: 0

Related Questions