#100DaysOfCode - Day 77: Buttons Update

Hi friends!

Looks like I lost my post about what I worked on yesterday, so in shorter summary, I got to work on some organizational things, as well as alignment for the buttons on the website. If you’ll notice (on very narrow browsers) now, the entire box of the link is aligned.

Before

After

This was actually an admittedly very simple change, that just required setting the css height property to 100% for the elements inside of each of the inner <div> tags, like so:

<div class="postinator" style="display: flex;">
  
  <div class="page-item disabled flex-fill" style="flex: 1 1 0;">
    <a class="page-link" style="text-align:left; height:100%;" href="#">&laquo; Previous</a> <!-- height: 100% added -->
  </li>
  
  
  
  <div class="page-item disabled flex-fill" style="flex: 1 1 0;">
    <a class="page-link" style="text-align:right; height:100%;" href="">Next &raquo;</a> <!-- height: 100% added -->
  </div>
  
</div>

I then talked about the next steps for this change, which will involve separating out the » and « so that they’re adjacent on both sides. Then, we’ll finally look to move all of this into .css or .scss files to make the HTML more readable!

Stay awesome & happy coding!

MO