CODEWITHSUNDEEP
cssgridviewmaterialize
Meysam
Meysam

Reputation: 18157

How to change the default width of container in MaterializeCSS?

The default width of container is set to 70% in MaterializeCSS:

The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.

How could this be changed?

Upvotes: 9

Views: 19360

Answers (3)

Gediz GÜRSU
Gediz GÜRSU

Reputation: 636

if its a single container easily :

<div class="container" style="width:85%">

if it is more than one container then derive a class:

.wide-container 
{
   .container;
   width: 85%;
}

then use it like :

<div class="wide-container">

Upvotes: 0

GregLimo
GregLimo

Reputation: 127

An alternative easy way would be to not use materialize's .container class but create your own class and wrap it into your code. In the CSS style of your custom class, add

.myContainer{
  width:100%;
}

Upvotes: 0

Marian
Marian

Reputation: 1352

Just override the property by making sure that your style is read by the browser after linking to, or importing materialize.css

You would need to copy and change these values:

.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}
@media only screen and (min-width: 601px) {
  .container {
    width: 85%;
  }
}
@media only screen and (min-width: 993px) {
  .container {
    width: 70%;
  }
}

Upvotes: 20

Related Questions