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

fix: anchor mobile hero vector to the viewport

Browse Source 
Move the mobile hero <img> out of the .vector container (which is intentionally wider than the viewport to bleed the desktop SVG) so the mobile img anchors to .heroVector's full-width edges. Set width: 100vw, left: 0, bottom: 6.25rem so the 402-wide mobile SVG distributes the linework across the full hero at the 402 reference composition.
This commit is contained in:
Keith Solomon
2026-06-28 13:35:35 -05:00
parent 93b9ef68cd
commit a761c16802
2 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/blocks/homepage-hero/homepage-hero.css
+4 -1
View File
@@ -131,9 +131,12 @@
} }
.homepage-hero .heroVector .hero-vector--mobile { .homepage-hero .heroVector .hero-vector--mobile {
bottom: 6.25rem;
display: block; display: block;
height: auto; height: auto;
width: 100%; left: 0;
position: absolute;
width: 100vw;
} }
.homepage-hero .heroMedia img, .homepage-hero .heroMedia img,
views/blocks/homepage-hero/homepage-hero.php
+1 -1
View File
@@ -80,8 +80,8 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
<div class="heroVector absolute inset-0 z-10"> <div class="heroVector absolute inset-0 z-10">
<div class="vector absolute bottom-8 w-full"> <div class="vector absolute bottom-8 w-full">
<?php get_template_part( 'views/partials/hero-vector' ); ?> <?php get_template_part( 'views/partials/hero-vector' ); ?>
<?php get_template_part( 'views/partials/hero-vector-mobile' ); ?>
</div> </div>
<?php get_template_part( 'views/partials/hero-vector-mobile' ); ?>
</div> </div>
<div class="homepage-hero__location" aria-hidden="true"> <div class="homepage-hero__location" aria-hidden="true">