Contenidos
Detectar qué elemento provoca scroll horizontal
En alguna ocasiones algún elemento tiene un ancho que excede el ancho del contenedor principal de la web provocando un scroll horizontal.
Para detectar qué elemento está causando esto podemos añadir este código CSS al inspector de Chrome y así poderlo detectar fácilmente de forma visual.
* {
outline: 1px solid #f00 !important;
}
Cuadrado responsive con CSS
.square {
position: relative;
width: 50%;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="square">
<div class="content">
Hello!
</div>
</div>
Estilos encabezados h1, h2,….
/* Centra el encabezado y añade una línea a cada lado */
/*h2 {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
h2:after {
display: inline-block;
margin: 0 0 8px 20px;
height: 3px;
content: " ";
text-shadow: none;
background-color: #999;
width: 140px;
}
h2:before {
display: inline-block;
margin: 0 20px 8px 0;
height: 3px;
content: " ";
text-shadow: none;
background-color: #999;
width: 140px;
}*/
Zoom en las imágenes de los posts del blog
/*.post-image {
position: relative;
overflow: hidden;
}
.post-image img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-image:hover img {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}*/
Limitar número de caracteres en un contenedor
.container {
width: 230px; // ancho máximo del contenedor
white-space: nowrap;
text-overflow: ellipsis; // cortar texto con puntos suspensivos
overflow: hidden;
}
Sidebar derecho sticky (WordPress)
@media (min-width: 769px) {
#right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}
}
Scroll fluido (sin javascript)
html {
scroll-behaviour: smooth;
}