refactor(NewsWidget responsive):updates the resonsive classes of the newsWidget

This commit is contained in:
SimonGschnell
2025-07-16 11:06:47 +02:00
parent a737dc20dc
commit f210bb8bbd
+56 -9
View File
@@ -4,7 +4,7 @@
--fhc-news-widget-highlight-color: var(--fhc-primary-highlight);
--fhc-news-widget-border: var(--fhc-border);
--fhc-news-widget-border-highlight: var(--fhc-border-highlight);
--fhc-news-widget-text-light: var(--fhc-text);
--fhc-news-widget-text-light: var(--fhc-light);
}
@@ -13,28 +13,68 @@
@media (min-width :576px) {
.fhc-news-menu-item {
/* padding: top right bottom left */
padding:0em 0em 0em 0em !important;
padding:0.125em 0.125em 0.125em 0.125em !important;
max-height:30px !important;
}
.fhc-news-menu-item-betreff p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
/* Number of lines to show */
overflow: hidden;
}
}
/* media query for md sizes */
@media (min-width :768px) {
.fhc-news-menu-item {
/* padding: top right bottom left */
padding: 0.3em 0.3em 0.3em 0.3em !important;
padding: 0.25em 0.25em 0.25em 0.25em !important;
max-height: 50px !important;
}
.fhc-news-menu-item-betreff p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
/* Number of lines to show */
overflow: hidden;
}
}
/* media query for lg sizes */
@media (min-width :992px) {
.fhc-news-menu-item {
/* padding: top right bottom left */
padding: 0.3em 0.3em 0.3em 0.3em !important;
padding: 0.25em 0.25em 0.25em 0.25em !important;
max-height: 75px !important;
}
.fhc-news-menu-item-betreff p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
/* Number of lines to show */
overflow: hidden;
}
}
/* media query for xl sizes */
@media (min-width :1200px) {
.fhc-news-menu-item {
/* padding: top right bottom left */
padding: 1em 1em 0.3em 1em !important;
padding: 1em 0.25em 0.25em 0.25em !important;
height: 100px !important;
}
.fhc-news-menu-item-betreff p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
/* Number of lines to show */
overflow: hidden;
}
}
@@ -42,7 +82,17 @@
@media (min-width :1400px) {
.fhc-news-menu-item {
/* padding: top right bottom left */
padding: 1.2em 1.2em 0.3em 1.2em !important;
padding: 1.2em 0.5em 0.5em 0.5em !important;
height: 125px !important;
}
.fhc-news-menu-item-betreff p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
/* Number of lines to show */
overflow: hidden;
}
}
@@ -54,8 +104,6 @@
.fhc-news-menu-item {
padding: 0.375rem;
color: var(--fhc-news-widget-text-light);
min-height: 5%;
max-height: 30%;
width: 100%;
justify-content: space-between;
align-items: center;
@@ -83,7 +131,6 @@
.fhc-news-menu-item-betreff
{
width: 100%;
text-align: center;
max-height: 100%;
height: 100%;
}