tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Have a working solution for the error message at desktop size, but it only looks good at the expected 1440x1024. Need a better solution. Somehow calculate placement?

This commit is contained in:
Robert McGovern 2020-09-10 00:28:40 +01:00
parent bfb154d80d
commit 31e73d0dbb
3 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
FrontendMentor/ping-coming-soon-page-master/css/style.css
View File

@ -252,10 +252,10 @@ footer {
.formSection input[type=text] { .formSection input[type=text] {
flex-basis: 66%; flex-basis: 66%;
width: calc(100% - 46px); width: calc(100% - 44px);
font-size: 17px; font-size: 17px;
font-weight: 300; font-weight: 300;
padding: 0.8rem 0; padding: 0.85rem 0;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
@ -267,10 +267,30 @@ footer {
font-size: 17px; font-size: 17px;
font-weight: 300; font-weight: 300;
padding: 0.8rem 0; padding: 0.85rem 0;
box-shadow: 0px 3px 10px 1px var(--site-paleBlue); 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 { .socialButtonsSection {
width: 10%; width: 10%;
} }

BIN
FrontendMentor/ping-coming-soon-page-master/work-through/awful-transition.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

8
FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md
View File

@ -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 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: 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~~ * ~~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 * 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: To Research:
* Dynamic font sizing to look nicer transitioning up. * Dynamic font sizing to look nicer transitioning up.