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

More adjustments to mobile positioning

This commit is contained in:
Robert McGovern 2020-09-08 19:28:04 +01:00
parent 32bf863905
commit dded46abe8
3 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,7 @@ body {
align-items: center; align-items: center;
align-content: center; align-content: center;
margin-top: 4.1rem; margin-top: 4.2rem;
} }
.logoSection { .logoSection {
@ -58,7 +58,7 @@ body {
.titleSection .line1 { .titleSection .line1 {
font-weight: 300; font-weight: 300;
color: var(--site-gray); color: var(--site-gray);
letter-spacing: 1.2; letter-spacing: 1.2px;
} }
.line1 b { .line1 b {
@ -67,7 +67,7 @@ body {
} }
.titleSection .line2 { .titleSection .line2 {
margin-top: 1rem; margin-top: 0.95rem;
font-size: 12px; font-size: 12px;
color: var(--site-gray); color: var(--site-gray);
} }
@ -89,7 +89,7 @@ body {
/* width: 85%; */ /* width: 85%; */
width: calc(100% - 46px); width: calc(100% - 46px);
color: var(--site-paleBlue); color: black;
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
border: 2px solid var(--site-paleBlue); border: 2px solid var(--site-paleBlue);
@ -103,6 +103,11 @@ body {
/*box-shadow: 3px 3px 1px 1px var(--site-paleBlue); */ /*box-shadow: 3px 3px 1px 1px var(--site-paleBlue); */
} }
.formSection input::placeholder{
padding-left: 8px;
color: var(--site-paleBlue);;
}
.formSection button { .formSection button {
font-family: 'Libre Franklin', sans-serif; font-family: 'Libre Franklin', sans-serif;
width: 100%; width: 100%;
@ -111,7 +116,7 @@ body {
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
border: none; border: none;
padding: 0.6rem 0; padding: 0.625rem 0;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
/* display: inline-block; */ /* display: inline-block; */
@ -123,7 +128,7 @@ body {
} }
.imageSection { .imageSection {
margin-top: 3.5rem; margin-top: 3.4rem;
text-align: center; text-align: center;
width: 95%; width: 95%;
/* display: flex; /* display: flex;
@ -143,7 +148,7 @@ footer {
} }
.socialButtonsSection { .socialButtonsSection {
/* margin-top: auto; */ /* margin-top: auto; */
margin-bottom: 1.45rem; margin-bottom: 1.35rem;
font-size: 20px; font-size: 20px;
} }
@ -160,7 +165,7 @@ footer {
color: var(--site-gray); color: var(--site-gray);
font-size: 10px; font-size: 10px;
text-align: center; text-align: center;
margin-bottom: 1.05rem; margin-bottom: 1.15rem;
} }
/* Feel free to remove these styles or customise in your own stylesheet 👍 */ /* Feel free to remove these styles or customise in your own stylesheet 👍 */

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

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

@ -33,4 +33,11 @@ Realised better to social icons into footer and move the footer out of the flex
So mobile is virtually there. The Ping! logo is slightly off, as is the "We are launching soon!" So mobile is virtually there. The Ping! logo is slightly off, as is the "We are launching soon!"
So close *sigh* So close *sigh*
Day break
Spent 20 minutes playing with mobile positioning. Crazy I know, but its like __near__ spot on.
![mobile difference](mobile-diff.png)