NataliiaBobrova/aira-wordpress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

second iteration of mobile styling fixes

Browse Source
This commit is contained in:
Nataliia Bobrova 2025-04-10 20:54:00 +00:00
parent 4a81870dba
commit 64937339fa
1 changed files with 139 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
assets/scss/_bootscore-custom.scss
View File

@ -432,9 +432,18 @@ body:not(.wp-admin) .wp-block-group.team {
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
.row > * {
padding-left: var(--wp--preset--spacing--30);
padding-right: var(--wp--preset--spacing--30);
}
.home .container { .home .container {
padding: 0; padding: 0;
.wp-block-columns {
padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}
} }
.wp-block-heading { .wp-block-heading {
margin-bottom: 0 !important; margin-bottom: 0 !important;
@ -445,17 +454,20 @@ body:not(.wp-admin) .wp-block-group.team {
} }
.wp-block-columns, .wp-block-columns,
.wp-block-cover { .wp-block-cover {
padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
gap: 10px; gap: 10px;
padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30); }
.entry-content .wp-block-columns {
padding: 0;
} }
.has-text-align-right { .has-text-align-right {
text-align: center; // text-align: center;
} }
.wp-block-columns > .wp-block-column { .wp-block-columns > .wp-block-column {
padding-top: var(--wp--preset--spacing--30) !important; padding-top: var(--wp--preset--spacing--30) !important;
padding-right: 0 !important; padding-right: 0 !important;
padding-bottom: var(--wp--preset--spacing--30) !important; padding-bottom: var(--wp--preset--spacing--30) !important;
padding-left: 0 !important; padding-left: 0 !important;
} }
.is-style-fixed-height-272, .is-style-fixed-height-272,
@ -473,16 +485,130 @@ body:not(.wp-admin) .wp-block-group.team {
} }
@include media-breakpoint-down(xl) {
@media only screen and (max-width: 768px) and (min-width: 388px) {
.is-home-featured-image { .is-home-featured-image {
.wp-block-cover__inner-container { .wp-block-cover__inner-container {
display: block; width: 360px;
width: auto; position: absolute;
background-color: white; left: 0;
padding: 10px; bottom: 0;
p.has-text-align-right { padding-right: var(--wp--preset--spacing--40);
text-align: center !important; padding-bottom: var(--wp--preset--spacing--40);
span {
display: block;
font-size: 45px !important;
} }
} }
} }
} }
@media only screen and (max-width: 991px) and (min-width: 769px) {
.is-home-featured-image {
.wp-block-cover__inner-container {
width: 360px;
position: absolute;
left: 0;
bottom: 0;
padding-right: var(--wp--preset--spacing--40);
padding-bottom: var(--wp--preset--spacing--40);
span {
display: block;
font-size: 45px !important;
}
}
}
}
@media only screen and (max-width: 1201px) and (min-width: 992px) {
.is-home-featured-image {
.wp-block-cover__inner-container {
// width: 360px;
// position: absolute;
// left: 0;
// bottom: 0;
padding-right: var(--wp--preset--spacing--40);
padding-bottom: var(--wp--preset--spacing--40);
span {
display: block;
font-size: 45px !important;
}
}
}
}
@media only screen and (max-width: 1400px) and (min-width: 1202px) {
.is-home-featured-image {
.wp-block-cover__inner-container {
// width: 360px;
// position: absolute;
// left: 0;
// bottom: 0;
padding-right: var(--wp--preset--spacing--40);
padding-bottom: var(--wp--preset--spacing--40);
span {
// display: block;
font-size: 50px !important;
}
}
}
.footer-crane .wp-block-cover__image-background {
background-position: 163% 14% !important;
}
}
/* Crane Image */
@media only screen and (max-width: 387px) {
.is-home-featured-image {
.wp-block-cover__inner-container {
position: absolute;
bottom: 0;
padding-right: var(--wp--preset--spacing--40);
padding-bottom: var(--wp--preset--spacing--40);
span {
display: block;
font-size: 45px !important;
}
}
}
}
@media only screen and (max-width: 452px) {
.footer-crane {
.wp-block-cover__image-background {
background-position: 50% 300px !important;
background-size: cover;
}
.wp-block-cover__inner-container {
padding-bottom: 200px;
}
}
}
@media only screen and (max-width: 768px) and (min-width: 453px) {
.footer-crane {
.wp-block-cover__image-background {
background-position: 50% 200px !important;
background-size: cover;
}
.wp-block-cover__inner-container {
padding-bottom: 200px;
}
}
}
@media only screen and (max-width: 1200px) and (min-width: 769px) {
.footer-crane {
.wp-block-cover__image-background {
background-position: -330px 10% !important;
background-size: inherit;
}
}
}