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

Fixed position of the social icons

This commit is contained in:
Robert McGovern 2020-09-11 21:47:09 +01:00
parent 31e73d0dbb
commit b159136955
3 changed files with 64 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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%;

28
FrontendMentor/ping-coming-soon-page-master/index.html
View File

@ -37,21 +37,21 @@
<img src="./images/illustration-dashboard.png" alt="Illustration of the dashboard" class="mockupImage">
</div>
</main>
<footer>
<div class="socialButtonsSection">
<a href="https://facebook.com/tarasis"><i class="fab fa-facebook-f icon-background"></i></a>
<a href="https://twitter.com/tarasis"><i class="fab fa-twitter icon-background"></i></a>
<a href="https://www.instagram.com/tarasis/"><i class="fab fa-instagram icon-background"></i></a>
</div>
<p class="copyright">
&copy; Copyright Ping. All rights reserved.
</p>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="mailto:work@tarasis.net">Robert McGovern</a>.
</p>
</footer>
</div>
<footer>
<div class="socialButtonsSection">
<a href="https://facebook.com/tarasis"><i class="fab fa-facebook-f icon-background"></i></a>
<a href="https://twitter.com/tarasis"><i class="fab fa-twitter icon-background"></i></a>
<a href="https://www.instagram.com/tarasis/"><i class="fab fa-instagram icon-background"></i></a>
</div>
<p class="copyright">
&copy; Copyright Ping. All rights reserved.
</p>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="mailto:work@tarasis.net">Robert McGovern</a>.
</p>
</footer>
<script src="./js/script.js"></script>
</body>
</html>

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

@ -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.
* 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.