0

I know this should be really straight forward but when I think I now what I am doing, its not going right.

Basically all I want to do is place the following icons/buttons into a grid layout so it positions better and it is responsive.

Right now I have positioned them using CSS - left: 250px; top: 50px; etc etc. Which I know is wrong or definitely not the best way to do this.

A screenshot of the current layout

Heres the JFiddle:

body {
    background-color: black;
  }

.fa-linkedin {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid white;
    padding: 50px;
    position: absolute;
    transform: rotate(45deg) translate(25px);
    top: 50px;
    left:195px;
}

.fa-linkedin span {
    position: absolute;
    transform: rotate(-45deg) translate(0, -14px);
}
    
.fa-linkedin:hover {
    background-color: white;
    color: black;
    border-color: black;
}    
    
.fa-twitter {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid white;
    padding: 50px;
    position: absolute;
    transform: rotate(45deg) translate(25px);
    top: 130px;
    left:115px;
}

.fa-twitter span {
    position: absolute;
    transform: rotate(-45deg) translate(0, -14px);
}
    
.fa-twitter:hover {
    background-color: white;
    color: black;
    border-color: black;
}        
    
.fa-envelope {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid white;
    padding: 50px;
    position: absolute;
    transform: rotate(45deg) translate(25px);
    top: 130px;
    right:185px;
}

.fa-envelope span {
    position: absolute;
    transform: rotate(-45deg) translate(0, -14px);
}
    
.fa-envelope:hover {
     background-color: white;
     color: black;
     border-color: black;
}
    
.fa-briefcase {
    color: black;
    background-color: #ba0e1e;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid black;
    padding: 50px;
    position: absolute;
    transform: rotate(45deg) translate(25px);
    top: 210px;
    right: 265px;
}

.fa-briefcase span {
    position: absolute;
    transform: rotate(-45deg) translate(0, -14px);
}
    
.fa-briefcase:hover {
     background-color: black;
     color: #ba0e1e;
     border-color: #ba0e1e;
}
<body> 
                        <a href="k"><i class="fa fa-linkedin"></i></a>
                        <a href="http://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
                        <a href="mailto:@gmail.com"> <i class="fa fa-envelope"></i></a>
                        <a href="#portfolio"><i class="fa fa-briefcase"></i></a>

  </body>

How would I go about into placing these into a responsive grid?

Many thanks

dlee23
  • 45
  • 1
  • 2
  • 7
  • Can you make a jfiddle example so we could play with it ? – MichalCh Jan 22 '16 at 17:08
  • Absolute positioning is a **very** poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out [**LearnLayout.com**](http://learnlayout.com/) – Paulie_D Jan 22 '16 at 17:24
  • I know my method is not right, I have not been taught how to build a website from scratch, I was given a template and told to work off it, thats it . I will check out the website you provided, many thanks. – dlee23 Jan 22 '16 at 17:55
  • I have placed the JFiddle function, however it looks really off, obviously from using the absolute positioning – dlee23 Jan 22 '16 at 17:56

0 Answers0