From b159136955e7353d4de8476ead1d9118bf180d64 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Fri, 11 Sep 2020 21:47:09 +0100 Subject: [PATCH] Fixed position of the social icons --- .../css/style.css | 54 ++++++++++++++----- .../ping-coming-soon-page-master/index.html | 28 +++++----- .../work-through/myProcess.md | 12 ++++- 3 files changed, 64 insertions(+), 30 deletions(-) diff --git a/FrontendMentor/ping-coming-soon-page-master/css/style.css b/FrontendMentor/ping-coming-soon-page-master/css/style.css index 284c090..27aeaa6 100644 --- a/FrontendMentor/ping-coming-soon-page-master/css/style.css +++ b/FrontendMentor/ping-coming-soon-page-master/css/style.css @@ -19,6 +19,7 @@ body { font-family: 'Libre Franklin', sans-serif; + min-width: 375px; } .flexContainer { @@ -27,10 +28,27 @@ body { align-items: center; align-content: center; - margin-top: 4.2rem; + height:100vh; + + /* width: max(90vw, 50vw); */ + /* width: max(50vw, 90vw); */ + /* width: min(90vw, 50vw); */ + /* width: min(50vw, 90vw); */ + /* width: max(min(90vw, 70vw), 50vw); */ + /* width: max(min(50vw, 90vw), 50vw); */ + /* width: min(max(90vw, 50vw), 50vw); */ + /* width: clamp(90vw, 70vw, 50vw); */ + /* width: clamp(90vw, 50vw, 50vw); */ + + + /* width: calc(90vw + (50vw - 90vw) * ((100vw - 375px) / (1440 - 375))); */ + /*50vw; < 600 90vw*/ + } .logoSection { + margin-top: 4.2rem; + display: flex; justify-content: center; } @@ -148,16 +166,16 @@ input[type="text"].errorBorder { } footer { - position: fixed; - bottom: 0; + margin-top: auto; text-align: center; - width: 100vw; + /* width: 100vw; */ } .socialButtonsSection { - margin-bottom: 1.35rem; + margin-bottom: 1.25rem; font-size: 14px; display: flex; - width: 35%; + justify-content: space-between; + width: 45%; } .socialButtonsSection a { @@ -196,9 +214,20 @@ footer { .attribution { font-size: 11px; text-align: center; } .attribution a i { color: hsl(228, 45%, 44%); } -@media screen and (max-width: 800px) { +@media screen and (max-width: 600px) { .flexContainer { width: 90vw; + /* height: 100vh; */ + } + + .formSection button { + margin-top: 0.55rem; + } +} + +@media screen and (min-width: 600px) and (max-width: 1050px) { + .flexContainer { + width: 75vw; height: 100vh; } @@ -207,11 +236,13 @@ footer { } } -@media screen and (min-width: 800px) { + +@media screen and (min-width: 1050px) { .flexContainer { width: 50vw; - height: 100vh; + } + .logoSection { margin-top: 4.3rem; } @@ -291,11 +322,6 @@ footer { } - .socialButtonsSection { - width: 10%; - } - - .imageSection { margin-top: 4.3rem; width: 89%; diff --git a/FrontendMentor/ping-coming-soon-page-master/index.html b/FrontendMentor/ping-coming-soon-page-master/index.html index c945968..fb51989 100644 --- a/FrontendMentor/ping-coming-soon-page-master/index.html +++ b/FrontendMentor/ping-coming-soon-page-master/index.html @@ -37,21 +37,21 @@ Illustration of the dashboard + - \ No newline at end of file diff --git a/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md b/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md index 8570def..055635c 100644 --- a/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md +++ b/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md @@ -80,7 +80,7 @@ Played with alignment so mobile & mobile error are close. Swapped method of doing the circles around the social icons. I would have preferred the stacks but I couldn't figure out how to put a thin border around a fa-circle BUGS: -* when screen not tall enough social buttons and copyright pushed up the page because I clamped them to the bottom of the browser window, rather than the page. +* ~~when screen not tall enough social buttons and copyright pushed up the page because I clamped them to the bottom of the browser window, rather than the page.~~ * ~~because I used attacked circles I can't just change the background to blue for hover. Need to either sub in a filled circle on hover OR swap to manually creating the circle~~ * transitions sizes between 600 and about 800 look wrong / bad / odd @@ -92,4 +92,12 @@ How to better handle this?????? Should be dynamic font sizing & padding I guess? I have a working solution the error message on the 1440x1024 resolution but it doesn't look good/work on the in between resolutions. Positioning should be calculated, based on resolution To Research: -* Dynamic font sizing to look nicer transitioning up. \ No newline at end of file +* Dynamic font sizing to look nicer transitioning up. + +Found a formula to scale the fonts, tried to use it to work with the view port width scaling but it wouldn't work. + +Fixed positioning of the footer section and social buttons. Needed it back in the flexbox, and set the margin-top to auto to fill up the space + +Last thing is my hack for the error when email field and button are in a row. How to position the text relative to the input field? Can I hide it behind it and move it down? If its in the same row, then it takes up space which we don't want, hence the 0 width (zero height for when in column) + +Ergh. Want to be done with this. Frustrating myself. \ No newline at end of file