Estoy usando materializecss marco , quiero saber cómo puedo cambiar el tamaño de los componentes en los que , Por ejemplo yo estoy usando el hoverable vista de la tarjeta y quiero cambiar el tamaño de su ancho de 400px , Aquí está el código que se utiliza

<div class="card hoverable small">
          <div class="card-image">
            <img src="images/sample-1.jpg">
            <span class="card-title">Card Title</span>
          </div>
          <div class="card-content">
            <p>This is simple card.</p>
          </div>
          <div class="card-action">
            <a href="#">This is a link</a>
          </div>
    </div>

`

  • sólo añadir card{width:400px;}
InformationsquelleAutor | 2015-09-27

2 Comentarios

  1. 5

    Si quieres la card tener 400px ancho en toda su proyecto de

    Agregar

    .card {
     width:400px;
    }

    O

    Si quieres la card tener 400px ancho solamente si desea utilizar cada vez que desea que dar una clase a la card como he dado en el fragmento de código y agregar el css

    .card-small {
         width:400px;
        }

    Comprobar el fragmento de código..

    CSS:

    .card-small {
      width: 400px;
    }

    HTML:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.css" rel="stylesheet" />
    <div class="card hoverable small card-small">
      <div class="card-image">
        <img src="images/sample-1.jpg">
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>This is simple card.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>

  2. 2

    es aconsejable que en diseño sensible debería porcentaje de uso en lugar de píxeles, pero si usted desea utilizar width :400px puede utilizar el siguiente código.

    acaba de ver la resolución de la pantalla en la que desea que el ancho de la tarjeta de 400px y puesto que la resolución en consulta de medios de comunicación como se muestra a continuación con su tarjeta de ancho de clase.

    en este ejemplo he mostrado inicial ancho de 800px entonces cuando mi resolución viene a 767px consulta de medios de comunicación se cambie el ancho a 400px y se mantendrá hasta la resolución es de 480 px, a continuación, de nuevo en 480 va a cambiar el ancho de 400 a 100px como está escrito en la consulta de medios de comunicación.

    .card { width:800px;}
    
    
    
    @media only screen
    and (max-width : 480px) {
    .card { width:100px;}
    }
    
    
    @media only screen
    and (max-width : 767px) {
    .card { width:400px;}
    }
    • ¿cómo puedo porcentaje de uso? en lugar de píxeles , como en android tienen la densidad de los pixeles de la dp hay algo como que en este que es independiente de la resolución de la pantalla ?
    • ¿cómo usted quiere que su tarjeta sea su anchura va a cambiar con la modificación de la resolución
    • sí, como en pantallas más pequeñas, quiero que mi tarjeta para ajustar a tamaño de pantalla

Dejar respuesta

Please enter your comment!
Please enter your name here