Search code examples
htmlcsspositionscaleglyphicons

how do I properly position & scale these elements in CSS?

I've been able to properly position & scale a few elements in my webpage using html & css, however due to the rules of positioning, I've gotten stuck on how to continue this action with two more elements.

The chevron icon in the picture must be below the last paragraph entitled "scroll down", & I also want it to scale with the screen size as I have been successfully able to do with the other text/elements as you can see:

enter image description here

here is the html:

<!DOCTYPE html>
<html>
  <head>
    <title>myWebpage</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />

    <link href="css/font-awesome.min.css"rel="stylesheet">

    <link href="main-sanctuary.css" rel="stylesheet" type="text/css">
  </head>

  <body>
      <header>
        <h1>Hellloooooooooooooo!</h1>
        <p id="first-p">Welcome All!<br>Make Yourself at home.</p>
        <p id="secondary-p">Scroll down.</p>
        <button id="logBtn">Log In</button>
        <button id="signBtn">Sign Up</button>
        <i class="fa fa-chevron-down fa-4x"></i>

      </header>
    </body>
 </html>

and here is the css:

* {
  margin:0;
  padding:0;
}

body,html {
  height: 100%;
  background: honeydew;
}
/* Header*/
header {
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/assests/books-apple.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;
  position:relative;
}
h1 {
  color: honeydew;
  font-family: "Helvetica Neue";
  font-size : 7.5vw;
  margin-bottom: 30px;
}
#first-p {
  color: honeydew;
  font-family: "Helvetica Neue";
  font-weight: lighter;
  font-style: normal;
  font-size : 3.5vw;
  margin-bottom: 50px;

}
#secondary-p {
  position: inherit;
  color: #FFD700;
  font-family: "Helvetica Neue";
  font-weight: lighter;
  font-style: normal;
  font-size : 2vw;
  margin-bottom: -90px;

}
.fa {
  color: #FFD700;

}

So how do I properly position the .fa under #secondary-p on my webpage & scale it as well?

Solution

  • Just remove margin-bottom : -90px; from #secondary-p, this will make Cheveron Icon go below Scroll Down (#sencondary-p).

    And for scaling the Cheveron Icon, add font-size to it with a value in vw. Like This :-

    .fa{
  color : #FFD700;
  font-size : 4vw;
}

    Demo is here.

    Update

    For shifting them a little bit down, wrap the .fa element and the #sencondary-p element inside a div and give that div some margin-top. Like this :-

    HTML :-

    <div id="wrapper">
  <p id="sencondary-p">Scroll Down</p>
  <i class = "fa fa-chevron-down fa-4x"></i>
</div>

    CSS :-

    #wrapper{
  margin-top : 100px; /*Increase the value to shift more down*/
}

    See the updated demo here.