Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

How do i align .pull-left to align center in bootstrap after xxx width?

How do i align .pull-left to align center in bootstrap after xxx width?

2 Answers

jag
jag
18,266 Points
jag
jag
18,266 Points 
.mobile-center{
    float:none !important;
    margin: 0 auto
}

You needed the !important declaration. Also checking your website does appear to show the .mobile-center class. The two classes that show up is contact-footer & pull-right.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Thank you very much. I just added !important. I did try this before i posted this question, but it didnt work, i must did somethign wrong. Well, not it works. Learned new thing :)

Oh, right, that website is not updated, i did it on my localhost.

Btw, what do you think about all this code? or rather, if you would improve the code, what would you do? if you have time.

jag
jag
18,266 Points
jag
jag
18,266 Points 
.mobile-center{
    float:none !important;
    margin: 0 auto
}

If we are talking about just this piece of code. Adding a margin would help spacing.

If we are talking about the footer content then it's all good and organized except for the contact me element. Removing the padding & matching the line-height to the element height centers it perfectly.

.contact-footer {
    color: #1e2222;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 25px;
    width: 170px;
    background: #3C4544;
    display: block;
    font-size: 13px;
    line-height: 40px;
    height: 40px;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    cursor: pointer;
}

But hey the style is up to you. The website looks great can't wait to see how it will look like when it's finished.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Thank you :)

One more thing, what do you think about this piece of code?

<div class="col-xs-12 col-sm-4 text-center footer-name">

I don't know, but i have strange feeling for this. Like if i should put the center and ft-name in another div. Lazy to write the class names xD Im trying to make the code as best as i can, few weeks ago my code was super messy, i didnt even use the calss row the right way lol and more.. iv read some articles, studied other website and its better. Now im trying to make it 'perfect' or as tbest as i can.

And thank you :D

jag
jag
18,266 Points
jag
jag
18,266 Points

Adding styles to the columns allows it as long as other styles don't mess up the grid system. So if it works than it's just fine. Indeed the best practice would be to separate them just incase you want to modify the element in such a way that would mess the grid system up.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Thank you! Really helped :)

jag
jag
18,266 Points
jag
jag
18,266 Points

Your welcome!

jag
jag
18,266 Points
jag
jag
18,266 Points 
<style>
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

.class{
float:left;
}

@media screen and (min-width: #px{
.class{
float:none;
margin:0 auto
}

}

</style>
<div class="pull-left">...</div>
<div class="pull-right">...</div>

<!-- Switch into this -->
<div class="class">...</div>

Since .pull-* has !important, I suggest making a separate class that floats and a media query that makes.

What element are you trying to float & center? Hopefully this works for you. Bootstrap has also .center-block but changing styles would be done in media query.

An alternative would be using JavaScript to remove/add classes.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Im trying to float this to center

      <footer class="footer">
         <div class="container-footer">
            <div class="row">
               <div class="col-xs-12 col-sm-4">
                  <ul class="list-inline footer-social">
                     <li><a href=""><i class="fa fa-facebook"></i></a></li>
                     <li><a href=""><i class="fa fa-linkedin"></i></a></li>
                     <li><a href=""><i class="fa fa-twitter"></i></a></li>
                  </ul>
               </div><!-- col-* -->


               <div class="col-xs-12 col-sm-4 text-center footer-name">
                  Copyright &copy; <span class="orange">Aurelian Spodarec</span> <?php echo date('Y'); ?>. All Rights Reserved
               </div><!-- col-* -->


               <div class="col-xs-12 col-sm-4">
                  <div class="contact-footer mobile-center pull-right">
                    <a href=""><i class="fa fa-envelope"></i>Contact Me</a></div><!-- /contact-footer -->
               </div><!-- col-* -->
            </div><!-- /row -->
         </div><!--content-->
      </footer>

I mean you know pull-right, wheres mobile-center, the COntact Me. Actually, its here on thiswebsite.

  .mobile-center{
        float:none;
        margin:0 auto
    }