From 611c35539912040ec9983763d7e457d7e8bb218a Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Mon, 24 Oct 2022 23:25:30 +0100 Subject: [PATCH] fixed other uses of height=100vh rather than min-height - including any other issues revealed by doing that, also fixed grid naming issue with base appareal solution --- .../article-preview-component/css/style.css | 40 +++++++------ .../base-apparel-coming-soon/css/style.css | 18 ++++-- .../four-card-feature-section/css/style.css | 6 +- .../css/style.css | 59 ++++++++++--------- .../profile-card-component/css/style.css | 37 +++++++----- .../css/style.css | 52 ++++++++-------- 6 files changed, 115 insertions(+), 97 deletions(-) diff --git a/projects/FrontendMentor/newbie/article-preview-component/css/style.css b/projects/FrontendMentor/newbie/article-preview-component/css/style.css index 66e10f6..311cf43 100644 --- a/projects/FrontendMentor/newbie/article-preview-component/css/style.css +++ b/projects/FrontendMentor/newbie/article-preview-component/css/style.css @@ -1,10 +1,10 @@ -/* +/* * Challenge resolutions: * 375x667 & 1440x800 * 327x512 - 730x280 */ - @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap"); :root { /* font stuff */ @@ -18,16 +18,16 @@ --cornerRadius: 10px; } -/* Base styling */ +/* Base styling */ body { - font-family: 'Manrope', sans-serif; + font-family: "Manrope", sans-serif; background-color: var(--lightGrayishBlue); display: flex; flex-direction: column; font-size: 13px; justify-content: center; - height: 100vh; + min-height: 100vh; } .articlePreview { @@ -50,7 +50,7 @@ body { .previewImage > img { width: 100%; - margin:-5% 0 -14.5% 0%; + margin: -5% 0 -14.5% 0%; } .previewBody { @@ -115,7 +115,7 @@ body { .articleShareButton { background-color: var(--lightGrayishBlue); - color: #6E8098; + color: #6e8098; width: 30px; height: 30px; @@ -152,7 +152,6 @@ body { padding: 0.75rem 1rem; top: -60px; right: -47px; - } .articleShareButtonTooltip::before { @@ -180,18 +179,18 @@ body { background: var(--veryDarkGrayishBlue); } -.articleShareButtonTooltip > p, .articleShareSection > p { +.articleShareButtonTooltip > p, +.articleShareSection > p { letter-spacing: 5px; color: var(--grayishBlue); font-weight: 500; font-size: 13px; } - @media screen and (min-width: 650px) { body { align-content: center; - align-items: center; + align-items: center; } .articlePreview { @@ -199,7 +198,7 @@ body { width: 50%; min-width: 600px; overflow: visible; - } + } .previewImage { width: 100%; @@ -207,7 +206,7 @@ body { } .previewImage > img { - margin:0; + margin: 0; height: 105%; object-fit: cover; object-position: left; @@ -226,17 +225,22 @@ body { font-size: 20px; letter-spacing: 0.25px; line-height: 28px; - } .articleSell { margin-top: 0.5rem; } - + .articleFooter { padding: 0rem 1.75rem 1.5rem 1.5rem; } - } -.attribution { position: absolute; bottom: 0; font-size: 11px; text-align: center; } -.attribution a { color: hsl(228, 45%, 44%); } \ No newline at end of file +.attribution { + position: absolute; + bottom: 0; + font-size: 11px; + text-align: center; +} +.attribution a { + color: hsl(228, 45%, 44%); +} diff --git a/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css b/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css index cac4809..e864881 100644 --- a/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css +++ b/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css @@ -71,7 +71,7 @@ body { font-family: "Josefin Sans", sans-serif; - height: 100vh; + min-height: 100vh; display: flex; justify-content: center; @@ -80,15 +80,17 @@ body { main { max-width: 31.25rem; + + overflow: hidden; } .header { margin: 1.875rem 2rem 2rem 2rem; - grid-area: "logo"; + grid-area: logo; } .body { - grid-area: "body"; + grid-area: body; margin: 4rem 2rem 5.75rem 2rem; text-align: center; @@ -117,7 +119,7 @@ main { } .hero-picture { - grid-area: "hero-image"; + grid-area: hero-image; justify-self: end; margin: 0 auto; } @@ -221,6 +223,12 @@ main { white-space: nowrap; } +@media screen and (max-width: 23.375rem) { + .email-form { + width: unset; + } +} + @media screen and (min-width: 62.5rem) { :root { --fs-header: 4rem; @@ -241,7 +249,7 @@ main { body { background: var(--gradient-white); - margin: auto; + margin: 0 auto; } main { diff --git a/projects/FrontendMentor/newbie/four-card-feature-section/css/style.css b/projects/FrontendMentor/newbie/four-card-feature-section/css/style.css index 1bc7d10..0b99642 100644 --- a/projects/FrontendMentor/newbie/four-card-feature-section/css/style.css +++ b/projects/FrontendMentor/newbie/four-card-feature-section/css/style.css @@ -36,7 +36,11 @@ body { font-size: 15px; background-color: var(--veryLightGray); - height: 100vh; + min-height: 100vh; +} + +main { + margin-bottom: 5rem; } .flexContainer { diff --git a/projects/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/style.css b/projects/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/style.css index 08205c8..1c5fd92 100644 --- a/projects/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/style.css +++ b/projects/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/style.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;700&display=swap"); :root { font-size: 16px; @@ -10,16 +10,16 @@ body { background-image: url("../images/bg-desktop.svg"); background-repeat: no-repeat; /*background-size: contain; */ - + color: white; margin: 0; /* display: flex; */ - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; } h1 { - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; font-weight: 400; /* 400 & 40 are very close*/ font-size: 40px; } @@ -116,17 +116,22 @@ h1 { background: rgb(174, 6, 208); } -.attribution { margin-top: 1rem; font-size: 11px; text-align: center; } -.attribution a { color: hsl(63, 100%, 65%); } +.attribution { + margin-top: 1rem; + font-size: 11px; + text-align: center; +} +.attribution a { + color: hsl(63, 100%, 65%); +} /* Formating for Mobile devices. Sample to match is 375z800 */ @media screen and (max-width: 1100px) { - body { background-image: url("../images/bg-mobile.svg"); background-repeat: no-repeat; /* background-size: contain; */ - + color: white; margin: 0; padding: 0; @@ -146,41 +151,37 @@ h1 { .illustration { max-width: 100%; - max-height: 100vh; - height: auto; + max-height: 100%; + /* height: auto; */ } .middleSection { margin: 0; display: flex; flex-direction: column; - width: 100% - + width: 100%; } - + .siteBlurb { - margin:0; + margin: 0; margin-top: 0.5rem; text-align: center; width: 100%; - - /* line-height: 2rem; - font-weight: 400; */ } - + .siteBlurb h1 { margin: 1.625rem 2rem 0rem 2rem; font-weight: 400; font-size: 1.5rem; line-height: 1.5; } - + .siteBlurb p { - margin:0.9rem 2.25rem; + margin: 0.9rem 2.25rem; font-size: 1rem; line-height: 1.5rem; } - + .registerButton { margin-top: 0.875rem; background-color: white; @@ -197,21 +198,21 @@ h1 { border-radius: 32px; box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.4); /* 10px 5px 10px*/ } - + .socialButtonsSection { /* display: block; */ text-align: center; - margin:0; + margin: 0; margin-top: 3rem; } - + .socialButtonsSection i { /* padding: 0.5rem; */ margin-left: 0.375rem; margin-top: 0.9375rem; - margin-right: 0; + margin-right: 0; } - + .circleIcon { margin: 0; padding: 0; @@ -228,5 +229,7 @@ h1 { font-size: 14px; } - .attribution { margin: 10px 0;} -} \ No newline at end of file + .attribution { + margin: 10px 0; + } +} diff --git a/projects/FrontendMentor/newbie/profile-card-component/css/style.css b/projects/FrontendMentor/newbie/profile-card-component/css/style.css index 3e001b6..4f0f403 100644 --- a/projects/FrontendMentor/newbie/profile-card-component/css/style.css +++ b/projects/FrontendMentor/newbie/profile-card-component/css/style.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap"); /* sizes: 1440x720 , 375 × 667 */ *, @@ -23,14 +23,13 @@ html { font-size: var(--page-base-font-size); - height: 100%; } body { background-color: var(--dark-cyan); font-size: var(--default-font-size); font-weight: 700; - font-family: 'Kumbh Sans', sans-serif; + font-family: "Kumbh Sans", sans-serif; color: var(--very-dark-desaturated-blue); display: flex; @@ -39,7 +38,9 @@ body { align-items: center; margin: 0 auto; - height: 100%; + min-height: 100vh; + + overflow: hidden; } .card { @@ -48,7 +49,7 @@ body { box-shadow: 0px 50px 100px -20px rgba(8, 70, 94, 0.504835); border-radius: 15px; text-align: center; - + width: min(87vw, 350px); } @@ -68,7 +69,7 @@ body { height: 96px; border-radius: 50%; - top: calc(100% - 96px/2); + top: calc(100% - 96px / 2); } .photo:after { @@ -76,12 +77,12 @@ body { padding: 5px; border: 5px solid white; position: absolute; - content: ''; + content: ""; top: -5px; left: -5px; bottom: -5px; right: -5px; - } +} .nameAndAge { margin-top: 4.5rem; @@ -89,7 +90,8 @@ body { padding-bottom: 0.25rem; } -.name, .stat { +.name, +.stat { font-weight: bold; } @@ -129,10 +131,11 @@ body { padding-bottom: 0.1875rem; } -.topCircle, .bottomCircle { +.topCircle, +.bottomCircle { position: absolute; - width: 100vw; - height: 100vh; + width: 100%; + min-height: 100%; background-size: auto; transform: translate(-50%, -50%); z-index: -1; @@ -158,9 +161,11 @@ footer { bottom: 1rem; } -.attribution { - font-size: 11px; - text-align: center; +.attribution { + font-size: 11px; + text-align: center; bottom: 1rem; } -.attribution a { color: hsl(228, 45%, 44%); } +.attribution a { + color: hsl(228, 45%, 44%); +} diff --git a/projects/FrontendMentor/newbie/single-price-grid-component-master/css/style.css b/projects/FrontendMentor/newbie/single-price-grid-component-master/css/style.css index bc81393..05d19f1 100644 --- a/projects/FrontendMentor/newbie/single-price-grid-component-master/css/style.css +++ b/projects/FrontendMentor/newbie/single-price-grid-component-master/css/style.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap"); /* -- Basic Styling -- */ @@ -15,7 +15,6 @@ --site-grayish-blue: hsl(218, 22%, 67%); --box-border-radius: 8px; font-weight: 400; - } * { @@ -29,9 +28,9 @@ body { /* per the style guide, the body copy is 16px */ font-size: 16px; - font-family: 'Karla', sans-serif; + font-family: "Karla", sans-serif; width: 85vw; - height: 100vh; + min-height: 100vh; margin: 0 auto; display: flex; @@ -44,7 +43,7 @@ body { } .container { - box-shadow: 2px 10px 25px -12px rgba(0,0,0,0.5); + box-shadow: 2px 10px 25px -12px rgba(0, 0, 0, 0.5); } .box { @@ -59,7 +58,6 @@ body { color: white; font-size: 0.95rem; /* font-weight: 700; */ - } /* Specific stylings */ @@ -74,7 +72,7 @@ body { .topRow .heading { color: var(--site-cyan); - font-size: 1.20rem; + font-size: 1.2rem; } .quickSell { @@ -91,10 +89,9 @@ body { .bottomRow { display: flex; flex-direction: column; - } .pricingBox { - background-color: var(--site-cyan); + background-color: var(--site-cyan); } .priceRow { display: flex; @@ -104,7 +101,6 @@ body { .price { color: white; font-size: 1.5rem; - } .pricePeriod { color: var(--site-greener-cyan); @@ -123,21 +119,18 @@ body { color: white; /* width: 85%; */ /* height: 20%; */ - padding: 13px 3.25rem; + padding: 13px 3.25rem; /* margin-left: auto; */ /* margin-right: auto; */ /* align-self: center; */ justify-content: center; border-radius: 5px; font-weight: 700; - - } .whyUsBox { background-color: var(--site-greener-cyan); border-bottom-left-radius: var(--box-border-radius); border-bottom-right-radius: var(--box-border-radius); - } .blurb { margin-top: 0.75rem; @@ -158,15 +151,19 @@ footer { } /* Feel free to remove these styles or customise in your own stylesheet 👍 */ - .attribution { font-size: 11px; text-align: center; - /* visibility: hidden; */ - } - .attribution a { color: hsl(228, 45%, 44%); } +.attribution { + font-size: 11px; + text-align: center; + /* visibility: hidden; */ +} +.attribution a { + color: hsl(228, 45%, 44%); +} -/** +/** * * style guide has 2 designs, one aimed for 375x870, and the other 1440x800 * TODO: Tweak transition point later -*/ +*/ @media screen and (max-width: 500px) { .topRow { } @@ -189,7 +186,7 @@ footer { } .quickSell { - margin-top: 1.20rem; + margin-top: 1.2rem; font-size: 0.8rem; } @@ -220,22 +217,20 @@ footer { } .signupButton { margin-top: 1.5rem; - padding: 13px 3.25rem; - + padding: 13px 3.25rem; } .whyUsBox { } .blurb { margin-top: 0.75rem; } - + .blurb .unstyledList { font-size: 14px; } - + footer { } - } @media screen and (min-width: 500px) and (max-width: 800px) { @@ -245,7 +240,7 @@ footer { } .signupButton { - font-size: 0.90rem; + font-size: 0.9rem; } } @@ -261,7 +256,6 @@ footer { .pricingBox { width: 50%; border-bottom-left-radius: var(--box-border-radius); - } .signupButton { } @@ -269,4 +263,4 @@ footer { width: 50%; border-bottom-left-radius: 0px; } -} \ No newline at end of file +}