Add mobile styles for the carousel and gallery shortcodes

This commit is contained in:
Mircea-Pavel ANTON 2023-01-25 13:17:19 +00:00
parent 7fbec5e0d0
commit 2477af7cc9
2 changed files with 164 additions and 1 deletions

View file

@ -6156,6 +6156,8 @@ body:has(#menu-controller:checked) {
text-underline-offset: 4px;
}
/* Gallery Specific Styles */
.grid-w10 {
width: calc(10% - 5px);
margin: 0px !important;
@ -6261,6 +6263,115 @@ body:has(#menu-controller:checked) {
margin: 0px !important;
}
@media (min-width: 853px) {
.grid-w10 {
width: calc(10% - 5px);
margin: 0px !important;
}
.grid-w15 {
width: calc(15% - 5px);
margin: 0px !important;
}
.grid-w20 {
width: calc(20% - 5px);
margin: 0px !important;
}
.grid-w25 {
width: calc(25% - 5px);
margin: 0px !important;
}
.grid-w30 {
width: calc(30% - 5px);
margin: 0px !important;
}
.grid-w33 {
width: calc(33% - 5px);
margin: 0px !important;
}
.grid-w35 {
width: calc(35% - 5px);
margin: 0px !important;
}
.grid-w40 {
width: calc(40% - 5px);
margin: 0px !important;
}
.grid-w45 {
width: calc(45% - 5px);
margin: 0px !important;
}
.grid-w50 {
width: calc(50% - 5px);
margin: 0px !important;
}
.grid-w55 {
width: calc(55% - 5px);
margin: 0px !important;
}
.grid-w60 {
width: calc(60% - 5px);
margin: 0px !important;
}
.grid-w65 {
width: calc(65% - 5px);
margin: 0px !important;
}
.grid-w66 {
width: calc(66% - 5px);
margin: 0px !important;
}
.grid-w70 {
width: calc(70% - 5px);
margin: 0px !important;
}
.grid-w75 {
width: calc(75% - 5px);
margin: 0px !important;
}
.grid-w80 {
width: calc(80% - 5px);
margin: 0px !important;
}
.grid-w85 {
width: calc(85% - 5px);
margin: 0px !important;
}
.grid-w90 {
width: calc(90% - 5px);
margin: 0px !important;
}
.grid-w95 {
width: calc(95% - 5px);
margin: 0px !important;
}
.grid-w100 {
width: calc(100% - 5px);
margin: 0px !important;
}
}
/* Carousel Specific Styles */
.ratio-16-9 {
padding-top: 56.25%;
}
@ -6279,6 +6390,26 @@ body:has(#menu-controller:checked) {
/* 32:9 Aspect Ratio */
@media (min-width: 853px) {
.ratio-16-9 {
padding-top: 56.25%;
}
/* 16:9 Aspect Ratio */
.ratio-21-9 {
padding-top: 42.85%;
}
/* 21:9 Aspect Ratio */
.ratio-32-9 {
padding-top: 28.125%;
}
/* 32:9 Aspect Ratio */
}
.first\:mt-8:first-child {
margin-top: 2rem;
}

View file

@ -448,6 +448,7 @@ body:has(#menu-controller:checked) {
text-underline-offset: 4px;
}
/* Gallery Specific Styles */
.grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
.grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
.grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
@ -470,6 +471,37 @@ body:has(#menu-controller:checked) {
.grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
.grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
@screen md {
.grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
.grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
.grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
.grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
.grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
.grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
.grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
.grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
.grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
.grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
.grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
.grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
.grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
.grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
.grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
.grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
.grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
.grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
.grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
.grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
.grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}
/* Carousel Specific Styles */
.ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
.ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
.ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
.ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
@screen md {
.ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
.ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
.ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}