I have a question with Materialize css

Question

I have a question with Materialize css

Navigation

#1 by (1 votes)

1

I'm new to materialize, but I think it's a great framework, I regret not having used it in other projects, because it really facilitates the design, but my problem is this, I want to create 2 row together, that is, The materialize grid system.

I refer to this line:

<div class="row"></div>

If to that line I assign an image and a background color, and later I create another "row", I get separated by approximately 10px or more, I want them to be together.

Here is my sample code:

<div class="container">


   <div class="row"> 
     <div class="col s12 m12 l10 blue darken-2 center offset-l1 m0 s0"> <!-- Color azul y centrado-->
      <img class="responsive-img" src="img/logo.png"> <!-- Imagen responsiva-->
     </div> 
   </div>



   <div class="row"> 
     <div class="col s12 m12 l10 white center offset-l1 m0 s0"> <!-- Color  y centrado-->
      <!-- Contenido-->
      <br>
      <div class="row">
          <div class="col s12 m10 l8 offset-l2 m1 s0 z-depth-5 blue-text">
           <p>Mi texto 1</p>
       <p>Mi texto 2 </p>
          </div> 
      <!-- Fin Contenido-->
     </div> 
   </div>
  </div> 
 </div>

I would like the blue top part with my logo to be attached to the bottom part.

Here I leave you how it currently goes (you can see the separation between the blue and white part)

html5 html css3 materialize material-design

asked by Strelok 04.04.2017 в 14:54

source

1 answer

Restore phpmyadmin users with XAMPP in windows How do I code a string in json with php?

score 1 · Accepted Answer

You could do it in the following way:

Using simply columns instead of rows:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  <title>JS Bin</title>
</head>
<body>
  <div class="container">

   <div class="row"> 
     <div class="col s12 m12 l10 blue darken-2 center "> <!-- Color azul y centrado-->
       <h1>Titulo</h1>
     </div> 
     
     <div class="col s12 m12 l10 red blue-text">
       <p>Mi texto 1</p>
       <p>Mi texto 2 </p>
     </div> 
    </div> 
  </div> 
</body>
</html>

Or you could use two rows but removing the margin below:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  <title>Ejemplo</title>
</head>
<body>
  <div class="container">

   <div class="row" style="margin-bottom: 0px;"> 
     <div class="col s12 m12 l10 blue darken-2 center"> <!-- Color azul y centrado-->
       <h1>Titulo</h1>
     </div> 
   </div>
    
   <div class="row" style="margin-bottom: 0px;">
     <div class="col s12 m12 l10 red blue-text">
       <p>Mi texto 1</p>
       <p>Mi texto 2 </p>
     </div> 
   </div> 
  </div> 
</body>
</html>