Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: match mobile Our Work design

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 22:01:47 -05:00
parent ca8f5c939d
commit 6206761573
2 changed files with 139 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/blocks/our-work/our-work.css
+54 -27
View File
@@ -1,13 +1,12 @@
/* Our Work block styles */
.our-work {
background:
linear-gradient(
90deg,
var(--color-cwc-blue-01) 0%,
var(--color-cwc-blue-02) 52%,
var(--color-cwc-blue-02) 100%
);
background: linear-gradient(
90deg,
var(--color-cwc-blue-01) 0%,
var(--color-cwc-blue-02) 52%,
var(--color-cwc-blue-02) 100%
);
border-bottom: 16px solid var(--color-secondary);
color: var(--color-white);
/* margin-bottom: clamp(4rem, 7vw, 5.5rem); */
@@ -56,7 +55,7 @@
.our-work__content {
grid-area: content;
margin-lefT: 4rem;
margin-left: 4rem;
max-width: 46.75rem;
}
@@ -190,23 +189,35 @@
}
}
@media (max-width: 640px) {
@media (max-width: 767px) {
.our-work {
margin-bottom: 2rem;
padding-top: 3.25rem;
min-height: clamp(44rem, 220.9vw, 55.5rem);
padding-top: 4.25rem;
}
.our-work__vector img {
height: 118%;
max-width: none;
object-fit: cover;
object-position: 85% center;
transform: translateY(clamp(8rem, 39.8vw, 10rem));
width: 118%;
}
.our-work__inner {
gap: 1.4rem;
gap: 0;
padding-inline: 2rem !important;
}
.our-work__content {
max-width: 20rem;
margin-inline: 0;
max-width: 21rem;
text-align: left;
}
.our-work__content .acf-innerblocks-container {
gap: 1rem;
gap: 2.125rem;
}
.our-work__content h1,
@@ -215,43 +226,59 @@
.our-work__content h4,
.our-work__content h5,
.our-work__content h6 {
font-size: clamp(2rem, 9vw, 2.45rem);
font-size: clamp(2.5rem, 11vw, 2.75rem);
}
.our-work__content p {
font-size: var(--text-14px);
line-height: 1.35;
font-size: var(--text-16px);
line-height: 1.45;
text-wrap: wrap;
}
.our-work__content .wp-block-acf-buttons > div {
gap: 0.75rem;
flex-wrap: nowrap;
gap: 2rem;
justify-content: flex-start;
}
.our-work__content x-button {
flex: 1 1 0;
min-width: 0;
}
.our-work__content .button {
font-size: var(--text-14px);
min-height: 2.25rem;
min-width: 6.35rem;
padding: 0.5rem 0.8rem;
font-size: var(--text-18px);
min-height: 2.75rem;
min-width: 0;
padding: 0.65rem 1rem;
white-space: nowrap;
width: 100%;
}
.our-work__media--left {
justify-self: start;
margin: 0 0 -3.25rem;
max-width: 9.5rem;
margin: 4rem 0 0;
max-width: 11.8125rem;
position: relative;
width: 55.9%;
z-index: 2;
}
.our-work__media--bottom {
justify-self: end;
margin-bottom: -2.35rem;
max-width: 20.5rem;
width: calc(100% - 2.25rem);
margin: -3.5rem 0 0;
max-width: none;
position: relative;
transform: translateX(2rem);
width: 100%;
z-index: 1;
}
.our-work:not(.has-left-image) .our-work__media--bottom {
justify-self: center;
width: 100%;
}
.our-work__image {
object-fit: contain;
}
}