Refactor home hero graphic styles and update image attributes for better responsiveness. Adjusted width to 100% with a max-width of 856px and set height to auto. Removed width attribute from the image tag in index.page.tsx.

This commit is contained in:
akcodez
2025-07-14 11:23:30 -07:00
parent a1227322fa
commit b416365695
3 changed files with 9 additions and 3 deletions

View File

@@ -112,7 +112,7 @@ export default function Index() {
<div className="overflow-hidden"> <div className="overflow-hidden">
<section className="container-new pb-26-until-sm mt-10 mb-10-sm text-center"> <section className="container-new pb-26-until-sm mt-10 mb-10-sm text-center">
<div className="w-100"> <div className="w-100">
<img id="home-hero-graphic" alt="(stylized X graphic surrounded by a diverse mix of people)" width="856" height="469" loading='eager' /> <img id="home-hero-graphic" alt="(stylized X graphic surrounded by a diverse mix of people)" loading='eager' />
</div> </div>
<div className="col-lg-6 mx-auto text-center pl-0 pr-0"> <div className="col-lg-6 mx-auto text-center pl-0 pr-0">
<div className="d-flex flex-column-reverse"> <div className="d-flex flex-column-reverse">

File diff suppressed because one or more lines are too long

View File

@@ -33,10 +33,16 @@
} }
#home-hero-graphic { #home-hero-graphic {
width: 856px; width: 100%;
max-width: 856px;
height: auto;
object-fit: cover; object-fit: cover;
content: url("../img/home-hero.svg"); content: url("../img/home-hero.svg");
margin-bottom: 24px; margin-bottom: 24px;
display: block;
margin-left: auto;
margin-right: auto;
@media (min-width: 992px) { @media (min-width: 992px) {
min-height: 470px; min-height: 470px;
} }