diff --git a/css/layout/header.css b/css/layout/header.css index 4a0f10b..252a7b4 100644 --- a/css/layout/header.css +++ b/css/layout/header.css @@ -12,3 +12,4 @@ header a img { display: block; } + diff --git a/css/layout/main.css b/css/layout/main.css index 2de55a0..1723a67 100644 --- a/css/layout/main.css +++ b/css/layout/main.css @@ -15,18 +15,20 @@ } .three-computers { - width: 315px; - height: 315px; + width: 100%; + max-width: 315px; margin-left: 124px; } .first-content-text { + width: 100%; max-width: 766px; } .content-card-container { max-width: 1092px; + width: 100%; height: 435px; display: flex; justify-content: space-around; @@ -43,15 +45,18 @@ } .first-card, .second-card, .three-card { - width: 350.33px; - height: 287.95px; + width: 100%; + max-width: 350.33px; + height: 100%; + max-height: 287.95px; + /* padding: 26px; */ background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); display: flex; justify-content: center; align-items: center; flex-direction: column; - margin: auto; + margin: 0px auto; } .first-card p, .second-card p, .three-card p { @@ -91,9 +96,6 @@ height: 332px; background: #FFFFFF; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); -} - -.grid-one, .grid-two, .grid-three, .grid-four { display: flex; justify-content: center; align-items: center; @@ -114,7 +116,9 @@ align-items: center; position: relative; max-width: 1186px; - height: 596px; + width: 100%; + height: 100%; + max-height: 596px; margin: auto; top: 242px; } @@ -134,15 +138,20 @@ .content-text-final p { max-width: 550px; + width: 100%; height: 120px; line-height: 24px; } -@media screen and (max-width: 415px) { +@media screen and (max-width: 1024px) { .main_banner_desktop { display: none; } + .main_banner_mobile { + width: 100%; + } + .first-content-information { flex-direction: column; margin-top: 84px; @@ -152,8 +161,8 @@ } .three-computers { - width: 239px; - height: 239px; + width: 100%; + max-width: 239px; margin-top: 137px; margin-left: 0; position: relative; @@ -165,7 +174,8 @@ } .first-content-card { - width: auto; + width: 100%; + max-width: 1092px; height: 966px; display: flex; justify-content: center; @@ -173,7 +183,7 @@ } .content-card-container { - width: auto; + width: 100%; height: 894px; flex-direction: column; justify-content: space-around; @@ -187,24 +197,32 @@ .grid-container-content { grid-template-columns: repeat(1, 1fr); gap: 20px; + margin: 0 23px; } .grid-one, .grid-two, .grid-three, .grid-four { - width: 368px; - height: 332px; + width: 100%; + max-width: 368px; + height: 100%; + max-height: 332px; + padding: 32px; } .grid-one p, .grid-two p, .grid-three p, .grid-four p { - padding: 0 33px; font-weight: 400; font-size: 14px; line-height: 24px; text-align: center; color: #000000; + width: 100%; + max-width: 367px; + height: 100%; + margin: 14px auto; } .grid-container { + width: 100%; height: 1394px; } @@ -213,8 +231,8 @@ } .content-text-final img { - width: 414px; - height: 414px; + width: 100%; + max-width: 414px; margin-right: 0; margin-bottom: 51px; } @@ -227,7 +245,8 @@ } .content-text-final p { - width: 350px; + width: 100%; + max-width: 350px; height: 192px; font-weight: 400; font-size: 16px; @@ -236,7 +255,7 @@ } -@media screen and (min-width: 415px) { +@media screen and (min-width: 1024px) { .main_banner_mobile { display: none; }