mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-06-13 10:09:27 +00:00
refactor(NewsWidget responsive):updates the resonsive classes of the newsWidget
This commit is contained in:
@@ -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%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user