71 lines
1.5 KiB
CSS
71 lines
1.5 KiB
CSS
|
|
#section_topics {
|
|
display: grid;
|
|
border: 3px solid rgb(255, 255, 255);
|
|
border-radius: 5px;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
padding: 0.5em;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.all_new_posts {
|
|
display: grid;
|
|
column-gap: 0.5em;
|
|
row-gap: 1em;
|
|
}
|
|
|
|
/* media querys */
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
/* Reglas CSS para pantallas de celulares */
|
|
/* red */
|
|
#section_topics {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.all_new_posts {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(auto, 1fr);
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) and (max-width: 991px) {
|
|
/* Reglas CSS para tablets */
|
|
/* purple */
|
|
#section_topics {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.all_new_posts {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(auto, 1fr);
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 992px) and (max-width: 1199px) {
|
|
/* Reglas CSS para laptops */
|
|
/* green */
|
|
#section_topics {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.all_new_posts {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(auto, 1fr);
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1200px) {
|
|
/* Reglas CSS para monitores ultra wide */
|
|
/* yellow */
|
|
#section_topics {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
|
|
.all_new_posts {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(auto, 1fr);
|
|
}
|
|
}
|