mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-01-22 14:35:43 -06:00
Add mobile styles for the carousel and gallery shortcodes
This commit is contained in:
parent
7fbec5e0d0
commit
2477af7cc9
2 changed files with 164 additions and 1 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 */
|
||||
}
|
Loading…
Reference in a new issue