Portfolio page help!

1

I’m stuck on my navbar for my portfolio page. It looks fine on my laptop but when I check the cell phone view, it does not line up evenly. The “about” and “work” buttons go in one line off center and the “contact” button falls below also off center. I thought creating columns would handle this but it doesn’t. Can you help me find my error?

HTML:

<div class="text-center scrollmenu row">
<a href="#about-down" name="about-up" class="col-sm-4 text-center">ABOUT</a>
<a href="#work-down" name="work-up" class="col-sm-4 text-center">WORK</a>
<a href="#contact-down" name="contact-up" class="col-sm-4 text-center">CONTACT</a>

</div>

CSS:

div.scrollmenu {
    background-color: #66aaaa;
    overflow: auto;
    white-space: nowrap;
  text-align: center;
  
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
  font-size: 45px;
    font-family: georgia;
      float: left;
}

div.scrollmenu a:hover {
    background-color: #ffbbbb;
  color: #bb0088;
}
2

I personally dont like bootstrap, I am not good at it. But here is a short suggesstion.
You can change the font size from px to vw like.

font-size: 4vw;
3

Well I did find that if you remove the float:left; from your “div.scrollmenu a” style, the links will be centered.

It’s strange…I was watching the css change over while shrinking the screen down and there doesn’t seem to be a bootstrap break point after 768px. Granted I was using the libraries linked from here: http://getbootstrap.com/getting-started/

You might want to add some breakpoints then yourself to your css depending on at what resolution size the layout starts to break. You can define a new font size there, either with em’s or as Naeemrind suggested and try vw’s. The only problem with using pixels to define your font size is that it’s inflexible. Meanwhile things like %, em, vw, are more fluid. Defining with pixels isn’t wrong by the way, but you have to be more on top of text when it comes to sizing it down yourself.

4

There are certain drawbacks when you are using floats. One of them is problems with centering.


Probably you should prefer using display:inline-block to floats.