Información de etiqueta

Respuestas populares con la etiqueta

6 votos
Aceptado

Problema con CSS Grid

Lo más aconsejable cuando trabajas con el sistema de áreas del Grid es visualizarlo como cuadrículas. En este caso se quiere que las filas tengan las siguientes cantidades de columnas: fila1->1 ...
HubertRonald's user avatar
  • 3,089
5 votos
Aceptado

Columnas con diferentes separaciones verticales

Sucede que la propiedad grid-column-gap no permite más de un valor por grid, es decir no es una propiedad agrupada. Fuente: Documentación Mozilla Documentación Oficial W3C Sin embargo podrías ...
Edgar Gutiérrez's user avatar
4 votos

Teoria sobre el sistema de rejillas css

una vez integres la librería puede ser Foundation o Bootstrap no necesitarás utilizar las reglas css grid ni flexbox simplemente le das las clases correspondientes a la documentación de dichas ...
Jonathan Schell's user avatar
4 votos
Aceptado

Títulos H2, H3 y saltos de línea en Grid

Podrías utilizar grid-column-start y grid-column-end que definen la posición y la extensión de un elemento dentro del contenedor grid. En este caso quiero que los h2 y h3 se extiendan sobre todas 6 ...
enxaneta's user avatar
  • 3,828
4 votos
Aceptado

Problema de centrado vertical con CSS Grid

Considera: Usa grid para establecer la estructura de tu grilla Usar mejor flexbox para la alineación de los elementos sobre alguno de sus 2 ejes Puedes construirlo de esta forma. Procedimiento A la ...
BetaM's user avatar
  • 31.2k
3 votos
Aceptado

Hacer una grid de imagenes con css grid

Partiendo que me apoye de este proyecto desarrollado por Sara Drasner para generar la estructura de la grilla buscada quedando de este modo: <style> body { margin: 0; } ....
BetaM's user avatar
  • 31.2k
3 votos
Aceptado

¿Cómo hacer que un card respete el tamaño de su imagen?

Cuando posicionas un elemento con position: absolute, él va a perder todo el espacio que ocuparía en el documento, no va a conocer quién es su padre cuando dices width: 100% o dónde ubicarse si dices ...
Oscar David Arbeláez's user avatar
3 votos
Aceptado

CSS Grid, mis imagenes se enciman unas con otras

Hola creo que hay un error en tu seccion de estilos la clase item no esta asignada a ningun elemento, en todo caso lo que estas buscando para ajustar la imagen al espacio es: .container img { ...
neollob's user avatar
  • 1,325
3 votos

Desplegar mesas en un grid

Entiendo que lo que necesitas es crear una tabla donde poner las mesas. Para la demostración utilizo un array mesasRy. Este array puede ser creado con PHP 1 Utilizando tablas: // numero de mesas ...
enxaneta's user avatar
  • 3,828
2 votos
Aceptado

Problema ubicación de invalid-feedback en radio buttons

Segun la documentación, esta bien en donde estas poniendo el div invalid-feedback Lo que se me ocurre que puedes hacer es "reubicarlo" con estilos: .form-check .invalid-feedback { margin-left: -...
Leonardo Cabré's user avatar
2 votos
Aceptado

Problema con grid-gap y fr

El problema es que en el primer section el hay 3 huecos de 20px y en el segundo solo 2, utilizando fr siempre quedarán 20px en el aire. Lo que puedes hacer es forzar en px la segunda columna del ...
Aitor's user avatar
  • 1,008
2 votos

Cómo puedo hacer este tipo de Card con Bootstrap 4?

La mejor manera de hacerlo no es con las cards de Boostrap. Yo lo haría con el componente media-object Te permite posicionar de forma fácil una imagen dentro de un wrap. Lee la documentación, es muy ...
Jheyman Mejia's user avatar
2 votos
Aceptado

CSS Grid, no me estaria ordenando las columnas como indico

En principio esta todo correcto lo único es que has dejado un espacio entre repeat y el parentesis debería ser: grid-template-columns: repeat(3, 250px);
neollob's user avatar
  • 1,325
2 votos
Aceptado

Ajustar div rotado dentro de otro div

Para que quede cerrada la pregunta: Faltaba el width en la clase element. Ya que son elementos cuadrados y tienen un height estático el width debería de ser el mismo. .element { border:2px ...
x3k's user avatar
  • 3,801
2 votos

como hacer un container con un div en la esquina superior derecha

El position absolute lo ubicara arriba del contenedor y el right lo ubicara a la derecha, ya ahi puedes acomodarlo <div style=" display: flex; width: auto; margin: 14px; box-...
Antony Silva's user avatar
2 votos

scroll en css grid

Jugué un buen poco con los valores entre las clases A y C. Aún no comprendo de donde viene la clase B, por lo que ha sido eliminada. Lo importante es saber definir height y max-height, ambas usandose ...
Excorpion's user avatar
  • 4,461
2 votos

tamaño diferente de celdas CSS Grid

Si quieres que la celda de abajo suba para ocupar el sobrante de su superior, con grid no sería posible porque al final el grid se comporta como si fuese una tabla. Quizá la mejor opción sería usar ...
Ariel González Fernández's user avatar
2 votos
Aceptado

Cuando pongo una imagen de fondo estatica solo se ve estatica cuando hago scroll desde mi ordenador

Es probable que la propiedad background-attachment: fixed no funcione en ciertos dispositivos móviles. Una posibilidad que tienes está en crear una capa fijada arriba, con el ancho y el alto de la ...
o1dskoo1's user avatar
  • 1,051
1 voto
Aceptado

como evitar que un Dropdown usando boostrap salga de la pantalla

Si estas utilizando bootstrap 4 solo tienes que agregar en tu dropdown la siguiente clase .dropdown-menu-right
SistemasSinZanjas's user avatar
1 voto

como evitar que un Dropdown usando boostrap salga de la pantalla

El problema parece estar en que tienes dos elementos con ml-auto dentro del mismo contenedor. Intenta lo siguiente: Mueve los dos ul que tienen ml-auto dentro de un div. Remueve el ml-auto de los ul....
Luis's user avatar
  • 226
1 voto
Aceptado

¿Cambiar el valor de la propiedad grid-column/row de css con JavaScript?

Cuando una propiedad contiene un guión, al acceder a ella con JavaScript se utiliza camel case: se quita el guión y la siguiente letra se hace mayúscula. Así, en CSS es z-index pero en JS es zIndex, ...
Alvaro Montoro's user avatar
  • 49.2k
1 voto
Aceptado

Slider queda sobrepuesto sobre la cabecera al hacer scroll hacia abajo

Podrías utilizar la propiedad z-index a tu navbar, esta propiedad indica el z-order de un elemento y sus descendientes. Cuando varios elementos se superponen, z-order determina cuales cubren a otros. ...
Nicolas Alejandro Gottig's user avatar
1 voto
Aceptado

Diseño de cuadrícula CSS

Con la ayuda de grid-template-areas podemos resolverlo de manera cómoda y además bastante visual. Inicialmente veo un error de concepto muy común. Pensaste que necesitabas 9 celdas para conseguir lo ...
phpMyGuel's user avatar
  • 14.8k
1 voto
Aceptado

¿Por qué este css grid no esta alineado y por arriba no hay margen?

Puedes lograrlo con lo siguiente: Crea tu rejilla con ayuda de CSS Grid distribuyendo las 9 cards con un espacio de 1fr en grupos de 3 A las cajas o cards que estan dentro del contenedor principal, ...
BetaM's user avatar
  • 31.2k
1 voto
Aceptado

after o before no muestra imagen en local

Tu problema es de rutas relativas, y de como estás funcionan. Por un lado tienes la etiqueta: <img src="imagenes/ubicacion.png" alt="icono de ubicacion"> Y por otro tienes la regla CSS: ....
phpMyGuel's user avatar
  • 14.8k
1 voto

after o before no muestra imagen en local

Tienes varios errores en los selectores. El primero es que en el CSS haces referencia a un elemento con clase .contenedor mientras que en el HTML el elemento que más se parece tiene clase ....
Rabegi's user avatar
  • 1,317
1 voto

Problema de centrado vertical con CSS Grid

Prueba a poner un centrado vertical a la etiqueta del contenedor en concreto a través de CSS: .centrado {vertical-align: middle;display:inline;} <div class="grid"> <header>Header</...
JorgeGuz's user avatar
  • 2,340
1 voto

CSS Grid Heigth no se adapta al contenido

Te olvidaste de cerrar el div principal con la clase "gridForm" por eso no puede obtener bien su height <div class="gridForm"> <p id="titleFormulario">Sumate a nuestra alternativa&...
Patrick's user avatar
  • 350

Only top scored, non community-wiki answers of a minimum length are eligible