2
\$\begingroup\$

Don't pay attention to the menu being awful above 789px. The "theoretical" task was to support only tablets and smartphones and I didn't bother to make the menu look fine on other devices. Just review it below 789px of VW.

Here's a codepen to demonstrate.

The page currently 100% matches the PSD designs and operates fine on all devices needed, though I am worried about the solutions I implemented to make it match.

  1. Setting the min-height to navbar to custom size and thus control the vertically centered looks on Collapse Button and Logo Image using padding. I had to set width: 70% below 482px to .navbar-brand so as the image resizes not to overflow.

    Maybe there's a way of more like "automatic" approach to the navbar size and menus being centered? I used some LESS to also count the paddings, but it also involved using paddings.

  2. Creating this second-container-helper class for the right section named "All Kinds of Birds" not to have the padding-left for the query above 768px, but have it for query below 768px.

    What is the better way to implement the looks? I mean, the "All Kinds of Birds" content not having the padding-left for above 768px, but have it below 768px so as it matches the PSD mockup.

HTML

<html lang="en">
<head>

  <meta charset="UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Document</title>

  <!-- Styles Embedded -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <!-- Embedded Font Awesome for the right-caret icon -->
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>


  <nav class="navbar navbar-default" role="navigation">



      <div class="navbar-header">
         <div class="container-fluid">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsed">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>



            <a class="navbar-brand" href="#">
              <img src="http://php.atservers.net/test/images/logo.png" alt="">
            </a>

        </div> <!-- //.container-fluid (Brand and button wrapped together so as they don't affect navbar LIST items) -->

      </div><!-- //.navbar-header -->

      <div class="collapse navbar-collapse" id="navbar-collapsed">

        <ul class="nav navbar-nav">

          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Bird Information</a></li>
          <li><a href="#">Contact</a></li>

        </ul><!-- //.navbar-nav -->

      </div> <!-- //.navbar-collapse -->



  </nav>

  <div class="row">
    <div class="col-xs-12 col-sm-12">
        <img src="http://php.atservers.net/test/images/bird-main.png" class="custom-img" alt="Hi, I'm a Bird">
    </div> <!-- //.column -->
  </div><!-- //.row -->

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-12">
        <p class="section-header">Find Birds In Your Area</p>
        <select name="" id="">
          <option value="" selected>Select Your Region</option>
          <option value="">CA</option>
          <option value="">FL</option>
          <option value="">WA</option>
        </select>
      </div>
    </div> <!-- //.row -->
  </div> <!-- //.container-fluid -->

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-12">
        <p class="section-subheader">We'r Really Into Birds</p>
        <p class="section-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p></p>
      </div><!-- //.column -->
    </div> <!-- //.row-->
  </div> <!-- //.container-fluid -->

  <div class="row">
    <div class="col-xs-12 col-sm-6 section-column">
      <img src="http://php.atservers.net/test/images/tree-birds.png" alt="" class="custom-img">
        <div class="container-fluid">
          <div class="section">
            <p class="section-subheader">Even Birds in Trees</p>
            <p class="section-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam excepturi voluptates harum fugit enim non, id porro repellendus soluta cupiditate consequuntur dignissimos dolorem sint corporis, illo aliquam blanditiis hic nam.</p>
                <p class="section-content">
                  <a href="#" class="section-link"><i class="fa fa-caret-right"></i>Learn more about trees (and birds)</a>
                </p>
          </div> <!-- //.section -->
      </div><!-- //.container-fluid -->
    </div> <!-- //.column-->


    <div class="col-xs-12 col-sm-6">
        <img src="http://php.atservers.net/test/images/all-birds.png" alt="" class="custom-img">
          <div class="second-container-helper"> <!-- Need that not to have left paddings @iPad, but have them @iPhone -->
            <div class="section">
              <p class="section-subheader">All Kinds of Birds</p>
              <p class="section-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est tenetur, reprehenderit at odio sit cumque neque placeat impedit praesentium soluta dolorum architecto qui molestias facilis voluptatibus, ut unde. Tenetur, provident.</p>
                  <p class="section-content">
                    <a href="#" class="section-link"><i class="fa fa-caret-right"></i>Learn more about trees (and birds)</a>
                  </p>
            </div><!-- //.section -->
          </div> <!-- //.second-container-helper -->
    </div> <!-- //.column -->

  </div><!-- //.row -->

    <footer>
      <div class="container-fluid">
        <div class="row">

          <div class="col-xs-12 col-sm-12">
            <div class="footer-credits">
              <p class="text-muted">® Registered trademark of An Amazing Company Name, an affiliate of independent Canadian birds</p>
              <p class="text-muted">© Copyright 2014 An Amazing Company Name</p>
            </div> <!-- //.footer-credits -->
          </div><!-- //.column -->

          <div class="col-xs-12 col-sm-12">
            <ul class="footer-nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">Terms of Use</a></li>
            </ul>
          </div><!-- //.column -->

        </div> <!-- //.row -->
      </div><!-- //.container-fluid -->
    </footer>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://php.atservers.net/test/js/bootstrap.min.js"></script>
</body>

CSS

/* Global Styles */

img{
  height: auto;
  width: 100%;
  display: block;
}

a{
  color: #ff6600;
}

.container-fluid{
  padding-left: 40px;
  padding-right: 40px;
}

/* //Global Styles */






/* Navbar Styles */

.navbar{
  min-height: 158px;
  background-color: #ffffff;
  margin-bottom: 0;
  border: none;
}

.navbar-default{
  border: none;
}

.navbar-brand{
  margin-top: 36px;
}

.navbar-default .navbar-toggle{
  margin-top: 58px;
}

.navbar-default .navbar-collapse{
  border-color: transparent;
}

.navbar-collapse.in{
  margin-top: 65px;
}

.collapsing{
  margin-top: 65px;
}

/* Navbar Colors and Fonts */

.navbar-nav{
  background-color: #ff6600;
  padding-left: 40px;
  padding-right: 40px;
  margin: 0 -15px;
}

.navbar-default .navbar-nav > li > a{
  color: #ffffff;
  border-top: 1px solid #fff;
}

.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{
  background-color: transparent;
  color: #fff;
  border-top: none;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
  color: #fff;
}

/* //Navbar Colors and Fonts */




.nav li:before{
    font-family: 'Glyphicons Halflings';
    content: "\e080";
    float: right;
    color: #fff;$
    padding-top: 10px;
}



/* //Navbar Styles */









/* Select Styles */


select{
  width: 100%;
  background-color: #ffffff;
  height: 60px;
  font-size: 24px;
  color: #c7c7cc;
  border: 2px solid #c7c7cc;
  border-radius: 4px;
  -webkit-appearance: none;
  background: url('../images/dropdown-arrow.png') no-repeat right;
  background-position: 98%;
}




/* //Select Styles */





/* Section Styles */

.section{
  margin-bottom: 30px;
}

.section-header{
  font-weight: bold;
  font-size: 30px;
  color: #ff6600;
  padding-top: 30px;
  padding-bottom: 30px;
}

.section-subheader{
  font-size: 28px;
  color: #ff6600;
  padding-top: 36px;
  padding-bottom: 16px;
}

.section-content{
  color: #999999;
  font-size: 18px;
}

.section-link{
  font-size: 14px;
}

.fa-caret-right{
  padding-right: 10px;
}
.container-helper{
  padding-right: 40px;
}


/* //Section Styles */








/* Media Queries */


/* Fix for iPhone select font size */

@media screen and (max-width: 482px){
  select{
    font-size: 18px;
  }
}

/* // Fix for iPhone */


/* Section Media Queries Helpers */

/* container in 2nd section has left padding below 768px to match PSD design */
@media screen and (max-width: 768px){
  .second-container-helper{
    padding-left: 40px;
  }
}

/* container in the left section doesnt have right padding after 768px, but has it below 768px */
@media screen and (min-width: 768px){
  .section-column .container-fluid{
    padding-right: 0;
  }
}
/* //Section Media Queries Helpers */



/* Logo img resizes below 482px */

@media screen and (max-width: 482px){
  .navbar-brand{
    width: 70%;
    margin-top: 46px;
    height: auto;
  }
}

/* //Logo img resizes below 482px */





/* //Media Queries */















/* Footer Styles*/



footer{
  margin-top: 80px;
}

.footer-credits{
  border-top: 1px solid #c7c7cc;
}
.footer-nav{
  list-style: none;
  padding-left: 0;
}

.footer-nav li{
  float: left;
  padding: 5px;
}

.footer-nav li a{
  border-right: 1px solid #c7c7cc;
  padding-right: 10px;
}

.footer-nav li:last-child a{
  border-right: none;
}



/* Footer Styles */
\$\endgroup\$
1
  • \$\begingroup\$ "How can I do this with less markup?" is kinda borderline for CR, it really should belong on Stack Overflow. \$\endgroup\$
    – cimmanon
    Jun 15 '14 at 17:17
2
\$\begingroup\$

Inappropriate use of markup

You're using paragraphs when you should be using heading tags (h1-h6) to markup your headlines (you also have a spelling error).

<p class="section-subheader">We'r Really Into Birds</p>

Should be:

<h1 class="section-subheader">We're Really Into Birds</h1>

You have some invalid markup, which can cause unexpected things to happen. You're not allowed to place paragraphs inside other paragraphs:

<p class="section-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p></p>

Should be:

<div class="section-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p></div>

However, if all of your paragraphs have the same styles, the paragraph itself should be styled rather than apply classes to each and every one:

p {
    /* styles from the section-content class */
}

Creating empty markup for styling purposes is dirty and probably one of the worst things that Twitter's Bootstrap encourages (classitis being the other). There are cleaner ways of creating this type of element:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsed">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

Should be something more like this:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsed">
  <span class="sr-only">Toggle navigation</span>
</button>

And

.navbar-toggle:before {
    /* styles to make it look like the ubiquitous hamburger icon */
}

The second-container-helper class

You have a few things going on wrong here (whether its the implementation or the design, I can't tell because you haven't shown us the mock-up you're working from). Either way, you don't need that extra element.

You have a page that looks like this:

enter image description here

In my opinion, it would be more aesthetically appealing if it looked like this:

enter image description here

or this:

enter image description here

However, all of them can be done with markup as simple as this by fiddling with the margins:

<ul>
  <li><p>A</p></li><!--
  --><li><p>B</p></li>
</ul>
\$\endgroup\$
3
  • \$\begingroup\$ The PSD was designed so as the images are not affected by the .container but still have space between each other, and should be collapsing for mobile display correctly (image is together with the text). And It also needed that this "Even Birds In trees" text has padding on left, but doesn't have on right > 768px, while has padding on both sides < 768px. Kind of same thing for the right. \$\endgroup\$ Jun 19 '14 at 5:14
  • \$\begingroup\$ So which image does this correspond to then? \$\endgroup\$
    – cimmanon
    Jun 19 '14 at 13:00
  • \$\begingroup\$ to the first one. \$\endgroup\$ Jun 19 '14 at 18:45
1
\$\begingroup\$

There are a couple of potential "gotchas" in your markup. These things will come back to haunt you (or someone else in the future) when you need to maintain and update the site.

Let me explain a little about the Bootstrap grid so that you'll understand why I'm recommending the changes that I am. The grid works with 3 parts: a container, a row and column(s). You already know that, but take a closer look at how and why it works like that:

The container, both in the .container and .container-fluid, has 15px of padding. The row negates the container padding with -15px of margin. Columns have 15px of padding, which pull the content away from the edges of the container and create a consistent 30px gutter.

The purpose for adding 15px of padding that is only negated by the negative row margins seems silly, but it is essential to allow for nesting columns inside of other columns! Note in the diagram below how the nested columns indicated by the red outline fits neatly into the enclosing column without getting additional padding applied.

enter image description here

For this reason, in my mind, it makes more sense to add the additional padding to the body. Then both the container, and container-fluid class work as normal. Also, you can eliminate all of the extra unnecessary container-fluid divs on the page, only one is needed. This will make it a whole a lot easier later if someone else with Bootstrap knowledge needs to work on your site and it will keep the markup to a minimum.

The next thing you can do to streamline your markup is remove all of the col-sm-12 classes from all of the places where you have both col-xs-12 and col-sm-12. This is unnecessary. Think of col-*-* classes as additive. If you want your design to behave the same from one breakpoint to the next you don't need to add a col class for that breakpoint.

While you're at it, you can remove some of the extra rows. The only purpose for the row is to break up the content where you need to ensure that the floats are cleared. So, in this case, you can use one row for your main content and just add the row class to your footer tag.

In keeping with the some of the key recommendations as the previous post, you should also remove the invalid markup, use the proper semantic tags for headings and style the html selectors instead of adding unneeded classes.

So now we're down to what to do about those images. Two things need to happen: 1. At all breakpoints images need to expand beyond the padding and touch the edges of the screen; and 2. If the images are set into columns that don't span the full width of the screen, the far left and far right images need to retain their inside gutter. To accomplish this you can wrap the images in a containing element and give it some negative margin, just like how rows work. In keeping with the mobile first approach, I created three classes: .col-img-full, .col-img-left, .col-img-right, all with margin: 0 -35px; applied. Then I added a media query, to remove the inside margin for just the right and left images with two rules where the left image gets margin-right: 0 and the right image gets margin-left: 0.

This makes your design much more flexible! In the event your client/boss/whatever, wants to make a small change and add a third column to the design. No problem and no extra markup or css is needed, just drop your column in the middle with your image and everything still lines up nicely.

Okay, finally, let's deal with the navigation. The container-fluid in the middle of your nav was making a mess of things. This is partly why you were getting the scrollbar at the bottom of the screen. Plus, the extra markup was potentially limiting your ability take advantage of some of the core Bootstrap nav features, such as adding navbar-right or navbar-left classes if you want to change up how the elements float. So, I brought everything back to basics and just styled the markup to match how your existing design looked on my screen. I didn't really understand what you meant by "centering the menu" because I see your codepen with the uncollapsed navigation floating left.

I made two additional small adjustments to your css for the nav: 1. On my screen the arrows after the links were unaligned. A better way than trying to tweak the padding for those elements from the top and adjust for margins at different resolutions is just to position them absolutely from the bottom. 2. Also, I found that your navigation was breaking onto the next line at certain resolutions, so I added a media query to make sure it stayed put at all resolutions.

Here's the final markup:

<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img src="http://php.atservers.net/test/images/logo.png" alt="">
            </a>
        </div><!-- //.navbar-header -->
        <div class="collapse navbar-collapse" id="navbar-collapsed">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Bird Information</a></li>
                <li><a href="#">Contact</a></li>
            </ul><!-- //.navbar-nav -->
        </div> <!-- //.navbar-collapse -->
    </nav>
    <div class="container-fluid">
        <div class="col-img-full">
            <img src="http://php.atservers.net/test/images/bird-main.png" alt="Hi, I'm a Bird">
        </div><!-- //.column -->
        <main class="row" role="main">
            <div class="col-xs-12">
                <h1>Find Birds In Your Area</h1>
                <select name="" id="">
                    <option value="" selected>Select Your Region</option>
                    <option value="">CA</option>
                    <option value="">FL</option>
                    <option value="">WA</option>
                </select>
            </div><!-- //.column -->
            <div class="col-xs-12">
                <h2>We're Really Into Birds</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p>
            </div><!-- //.column -->
            <div class="col-sm-6 section">
                <div class="col-img-left">
                    <img src="http://php.atservers.net/test/images/tree-birds.png">
                </div>   
                <h2>Even Birds in Trees</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam excepturi voluptates harum fugit enim non, id porro repellendus soluta cupiditate consequuntur dignissimos dolorem sint corporis, illo aliquam blanditiis hic nam.</p>
                <a href="#" class="section-link"><i class="fa fa-caret-right"></i>Learn more about trees (and birds)</a>
            </div> <!-- //.column .section-->
            <div class="col-sm-6 section">
                <div class="col-img-right">
                    <img src="http://php.atservers.net/test/images/all-birds.png">
                </div>   
                <h2>All Kinds of Birds</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est tenetur, reprehenderit at odio sit cumque neque placeat impedit praesentium soluta dolorum architecto qui molestias facilis voluptatibus, ut unde. Tenetur, provident.</p>
                <a href="#" class="section-link"><i class="fa fa-caret-right"></i>Learn more about trees (and birds)</a>
            </div> <!-- //.column .section -->
        </main><!-- //.row -->
        <footer class="row">
            <div class="col-xs-12">
                <div class="footer-credits">
                    <p class="text-muted">® Registered trademark of An Amazing Company Name, an affiliate of independent Canadian birds</p>
                    <p class="text-muted">© Copyright 2014 An Amazing Company Name</p>
                </div> <!-- //.footer-credits -->
                <ul class="footer-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Terms of Use</a></li>
                </ul>
            </div><!-- //.column -->
        </footer> <!-- //.row -->
    </div> <!-- //.container-fluid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://php.atservers.net/test/js/bootstrap.min.js"></script>
</body>

and here are the final styles (based on your custom bootstrap css file):

body {
    padding: 0 20px;    
}
a, h1, h2, h3, h4, h5, h6 {
    color: #ff6600;
}
h1 {
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}
h2 {
    font-weight: normal;
    font-size: 28px;
    padding-top: 36px;
    padding-bottom: 16px;
}
img {
    height: auto;
    width: 100%;
    display: block;
}
select {
    width: 100%;
    padding: 0 10px;
    background-color: #ffffff;
    height: 60px;
    font-size: 24px;
    color: #c7c7cc;
    border: 2px solid #c7c7cc;
    border-radius: 4px;
    -webkit-appearance: none;
    background: url('../images/dropdown-arrow.png') no-repeat right;
    background-position: 98%;
}
.section p {
    color: #999999;
    font-size: 18px;
}
a .fa-caret-right {
  padding-right: 10px;
}
.col-img-full, .col-img-left, .col-img-right {
    margin: 0 -35px;
}
/* Navbar Styles */
.navbar{
  min-height: 158px;
  background-color: #ffffff;
  margin-bottom: 0;
  border: none;
}
.navbar-default{
  border: none;
}
.navbar-brand {
  margin-top: 36px;
}
.navbar-default .navbar-toggle{
  margin-top: 58px;
}
.navbar-default .navbar-collapse{
  border-color: transparent;
}
.navbar-collapse.in, .collapsing{
  margin-top: 65px;
}
/* Navbar Colors and Fonts */
.navbar-nav{
  background-color: #ff6600;
  padding: 0 30px;
  margin-left: 20px;
}
.navbar-default .navbar-nav > li > a{
  color: #fff;
  border-top: 1px solid #fff;
  margin-top: 50px;
}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{
  background-color: transparent;
  color: #fff;
  border-top: none;
  margin-top: 51px; 
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
  color: #fff;
}
/* //Navbar Colors and Fonts */
.nav li:before{
    position: absolute;
    font-family: 'Glyphicons Halflings';
    content: "\e080";
    right: 0;
    color: #fff;
     bottom: 15px;
}
/* //Navbar Styles */
/* Nav Media Queries Helpers */
/* removes the margins so the navigation menu stays inline with brand before collapsing */
@media (min-width: 848px) and (max-width: 955px) { 
  .navbar-nav {
    margin: 0 -40px 0 0;
  }
}
/* Logo img resizes below 482px */

@media screen and (max-width: 482px){
  .navbar-brand{
    width: 70%;
    margin-top: 40px;
    height: auto;
  }
}
/* //Logo img resizes below 482px */
/* //Nav Media Queries Helpers */
/* Image Media Queries Helpers */
/* Remove margin on one side for images in left or right columns that extend beyond body padding */
@media screen and (min-width: 767px){
    .col-img-left {
        margin-right: 0;
    }

    .col-img-right {
        margin-left: 0;
    }
}
/* //Image Media Queries Helpers */
/* Footer Styles*/
footer{
  margin-top: 80px;
}
.footer-credits{
  border-top: 1px solid #c7c7cc;
}
.footer-nav{
  list-style: none;
  padding-left: 0;
}
.footer-nav li{
  float: left;
  padding: 5px;
}
.footer-nav li a{
  border-right: 1px solid #c7c7cc;
  padding-right: 10px;
}
.footer-nav li:last-child a{
  border-right: none;
}
/* Footer Styles */

All of these recommendations will result in much cleaner, easier-to-maintain, and more semantic markup. I hope you find some or all of them to be helpful! Much luck to you.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.