diff --git a/FrontendMentor/ping-coming-soon-page-master/css/style.css b/FrontendMentor/ping-coming-soon-page-master/css/style.css index 67cd2eb..284c090 100644 --- a/FrontendMentor/ping-coming-soon-page-master/css/style.css +++ b/FrontendMentor/ping-coming-soon-page-master/css/style.css @@ -252,10 +252,10 @@ footer { .formSection input[type=text] { flex-basis: 66%; - width: calc(100% - 46px); + width: calc(100% - 44px); font-size: 17px; font-weight: 300; - padding: 0.8rem 0; + padding: 0.85rem 0; padding-left: 20px; padding-right: 20px; } @@ -267,10 +267,30 @@ footer { font-size: 17px; font-weight: 300; - padding: 0.8rem 0; + padding: 0.85rem 0; box-shadow: 0px 3px 10px 1px var(--site-paleBlue); } + .notifyButton.notifyError { + transform: none; + } + + .errorSection { + height: 0; + width: 0; + padding: 0; + margin: 0; + transform: translate(-21rem, 3.2rem); + } + + .errorMessage { + font-size: 13px; + width: 16rem; + height: 2rem; + overflow: auto; + } + + .socialButtonsSection { width: 10%; } diff --git a/FrontendMentor/ping-coming-soon-page-master/work-through/awful-transition.png b/FrontendMentor/ping-coming-soon-page-master/work-through/awful-transition.png new file mode 100644 index 0000000..888799a Binary files /dev/null and b/FrontendMentor/ping-coming-soon-page-master/work-through/awful-transition.png differ 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 8f6ac29..8570def 100644 --- a/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md +++ b/FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md @@ -79,11 +79,17 @@ 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. * ~~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 +The transition thing is really bad + +![transition between mobile and desktop sizes](awful-transition) + +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