0

I have two containers, each container containing rows that center the icons and text on the page. You can see example of this here: http://laurelnatale.me/newport/index.html

Unless you are using FireFox. Then the rows are not following the spans and are to the far left of the page. I have been fiddling with this for a while, now trying push, pull, different asides, nothing is working, as if it is not reading anything else but that they should be in the container.

Here is the code:

<div class="container">

<div class=" row minipush">

<div class="span2 offset2">
 <div class="bigIcon"><a class="skylink" href="skills.html">Sk</a></div>
  <div class="hitext">skills</div>
  </div>

<div class="span4">
<div class="bigIcon"><a class="skylink" href="#">Pr</a></div>
<div class="hitext">projects</div>
</div>

<div class="span2 push2">
<div class="bigIcon"><a class="skylink" href="#">Tk</a></div>
<div class="hitext">toolkit</div>
</div>

</div><!--row end-->
</div><!--container end-->

<div class="container">
<div class=" row minipush2">

<div class="span3 offset4">
<div class="email">
<img class="emailicon" src="images/email.png" alt="email Laurel Natale">
<div class="hitext mail">email</div>
</div>

</div>

<div class="span3 pull2">
<div class="twitter">
<img class="twittericon" src="images/twitter.png" alt="Follow Laurel Natale on Twitter">  
<div class="hitext tweet">twitter</div>
</div>

</div>

</div><!--row end-->

</div><!--container end-->

Here is the CSS:

.minipush2 {
   display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-top: 5%;

    @include breakpoint(baby-bear) {
      padding-left: 15%;
      margin-top: 10%;
    }

}

.hitext {
  padding-bottom: 1em;
}

.mail {
  margin-left: - 12em;

  @include breakpoint(mama-bear) {
    margin-left: -8em;
  }

  @include breakpoint(baby-bear) {
    margin-left: 1em;
  }

}

.tweet {
  margin-left: - 12em;

  @include breakpoint(mama-bear) {
    margin-left: -8em;
  }

  @include breakpoint(baby-bear) {
    margin-left: 1em;
  }
}
4

0 回答 0