Menu icon Foundation
CSS not working in extended footer in Foundation 6

I've tried a lot of things, but my CSS styling doesn't appear in my extended footer in Foundation 6.  It works in CodePen, but not locally with Chrome or uploaded as a test site, so I don't know what to say. 

Here's the code if anyone has an idea:    

 

<!doctype html>

   <html class="no-js" lang="en" dir="ltr">

      <head>

         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

         <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Playfair+Display:900" rel="stylesheet">

       </head>

 

CSS:    

.extended-footer {
  background-color: rgb(255, 173, 51); 
  margin-top: 50px;
  padding-top: 30px; 
  padding-bottom: 30px;
  height: auto;
} 


@charset "UTF-8";

.rounded-social-buttons {
  text-align: center;
}

.rounded-social-buttons .social-button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 2.75rem; /* 3.125rem; */
  height: 2.75rem; /* 3.125rem; */
  border: 0.125rem solid transparent;
  padding: 0;
  text-decoration: none;
  text-align: center;
  color: #fefefe;
  font-size: 1.3rem; /* 1.5625rem; */
  font-weight: normal;
  line-height: 2em;
  border-radius: 1.5rem; /* 1.6875rem; */
  transition: all 0.5s ease;
  margin-right: 0.25rem;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

.rounded-social-buttons .social-button.facebook {
  background: #3b5998;
}

.rounded-social-buttons .social-button.facebook:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
  color: #3b5998;
  background: #fefefe;
  border-color: #3b5998;
}

.rounded-social-buttons .social-button.twitter {
  background: #55acee;
}

.rounded-social-buttons .social-button.twitter:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {
  color: #55acee;
  background: #fefefe;
  border-color: #55acee;
}

.rounded-social-buttons .social-button.linkedin {
  background: #007bb5;
}

.rounded-social-buttons .social-button.linkedin:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
  color: #007bb5;
  background: #fefefe;
  border-color: #007bb5;
}

.rounded-social-buttons .social-button.youtube {
  background: #bb0000;
}

.rounded-social-buttons .social-button.youtube:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {
  color: #bb0000;
  background: #fefefe;
  border-color: #bb0000;
}

.rounded-social-buttons .social-button.instagram {
  background: #125688;
}

.rounded-social-buttons .social-button.instagram:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {
  color: #125688;
  background: #fefefe;
  border-color: #125688;
}

.rounded-social-buttons .social-button.pinterest {
  background: #cb2027;
}

.rounded-social-buttons .social-button.pinterest:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.pinterest:hover, .rounded-social-buttons .social-button.pinterest:focus {
  color: #cb2027;
  background: #fefefe;
  border-color: #cb2027;
}

.cafe-name {
  font-family: 'Montserrat', sans-serif; 
  font-weight: 600; 
  font-size: 1.4rem; 
  letter-spacing: .15rem; 
  margin-top: 20px;
  margin-bottom: 0; 
  color: white;
}

@media screen and (max-width: 39.9375em) {
  .cafe-name {
    font-size: 1.1rem; 
  }
} 


.info {
  font-family: 'Montserrat', sans-serif; 
  font-size: .8rem; 
  letter-spacing: .1rem;
  color: #333;
}

@media screen and (max-width: 39.9375em) {
  .info {
    font-size: .7rem; 
    letter-spacing: .05rem;
  }
} 


.phone-number  {
  font-family: 'Montserrat', sans-serif; 
  font-size: 1.4rem;  
  font-weight: 400; 
  letter-spacing: .15rem; 
  color: white;
}

@media screen and (max-width: 39.9375em) {
  .phone-number {
    font-size: 1.1rem; 
  }
} 


.phone-number:hover {
  color: #666;
  font-weight: 700; 
}


.hours {
  font-size:.8rem;
  font-weight: 400; 
  letter-spacing: .1rem;
}

@media screen and (max-width: 39.9375em) {
  .hours {
    font-size: .7rem; 
    letter-spacing: .05rem;
  }
} 


.copyright {
  margin-top: 20px; 
  font-family: 'Montserrat', sans-serif;  
  font-weight: 400;
  font-size: .5rem; 
  letter-spacing: .075rem; 
  color: #333;
}

@media screen and (max-width: 39.9375em) {
  .copyright {
    font-size: .4rem; 
    font-weight: 400;
    letter-spacing: .05rem;
  }
} 

HTML:

<body>

   ...

   <!-- Footer --> 

    <div class="extended-footer">

       <div class="row">

         <div class="small-12 columns">

 

          <div class="rounded-social-buttons">

            <a class="social-button facebook" href="https://www.facebook.com/froggysfrenchcafe/"></a>

            <a class="social-button linkedin" href="https://www.linkedin.com/company/3893174/"></a>

            <a class="social-button youtube" href="https://www.youtube.com/watch?v=5AxN9Hp_TSk"></a>

            <a class="social-button instagram" href="https://www.instagram.com/explore/locations/235862736/froggys-french-cafe/"></a>

            <a class="social-button pinterest" href="https://www.pinterest.com/froggyscatering/"></a>

          </div>

        </div> <!-- end small-12 columns -->

 

        <div class="small-6 small-centered columns text-center">

 

          <h5 class="cafe-name">     

            FROGGY'S FRENCH CAFE    

          </h5>

          <p class="info">

            306 GREEN BAY RD., HIGHWOOD, IL 60040 

          </p>

 

          <p>

            <a class="phone-number" href="tel:847-433-7080">

            847-433-7080

            </a>

          </p>

 

          <p class="info">

            LUNCH: &nbsp;MON-FRI <span class="hours">(11:30am-2pm)</span>

            <br>

            DINNER: &nbsp;MON-THURS <span class="hours">(5-10pm)</span>&nbsp;&nbsp;|&nbsp;&nbsp;FRI-SAT <span class="hours">(5-11pm)</span>

            <br>

            CLOSED SUNDAY

          </p>

 

          <p class="copyright">

            COPYRIGHT &copy; FROGGY'S FRENCH CAFE

            <br>

            WEBSITE DESIGN: STEVE JULIUSSON

          </p>

        </div> <!-- end small-12 columns -->

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

    </div>

 

 

    <script src="js/vendor/jquery.js"></script>

    <script src="js/vendor/what-input.js"></script>

    <script src="js/vendor/foundation.js"></script>

    <script src="js/app.js"></script>

  </body>

</html>

extended footercssfoundation 6

I've tried a lot of things, but my CSS styling doesn't appear in my extended footer in Foundation 6.  It works in CodePen, but not locally with Chrome or uploaded as a test site, so I don't know what to say. 

Here's the code if anyone has an idea:    

 

<!doctype html>

   <html class="no-js" lang="en" dir="ltr">

      <head>

         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

         <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Playfair+Display:900" rel="stylesheet">

       </head>

 

CSS:    

.extended-footer {
  background-color: rgb(255, 173, 51); 
  margin-top: 50px;
  padding-top: 30px; 
  padding-bottom: 30px;
  height: auto;
} 


@charset "UTF-8";

.rounded-social-buttons {
  text-align: center;
}

.rounded-social-buttons .social-button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 2.75rem; /* 3.125rem; */
  height: 2.75rem; /* 3.125rem; */
  border: 0.125rem solid transparent;
  padding: 0;
  text-decoration: none;
  text-align: center;
  color: #fefefe;
  font-size: 1.3rem; /* 1.5625rem; */
  font-weight: normal;
  line-height: 2em;
  border-radius: 1.5rem; /* 1.6875rem; */
  transition: all 0.5s ease;
  margin-right: 0.25rem;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

.rounded-social-buttons .social-button.facebook {
  background: #3b5998;
}

.rounded-social-buttons .social-button.facebook:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
  color: #3b5998;
  background: #fefefe;
  border-color: #3b5998;
}

.rounded-social-buttons .social-button.twitter {
  background: #55acee;
}

.rounded-social-buttons .social-button.twitter:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {
  color: #55acee;
  background: #fefefe;
  border-color: #55acee;
}

.rounded-social-buttons .social-button.linkedin {
  background: #007bb5;
}

.rounded-social-buttons .social-button.linkedin:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
  color: #007bb5;
  background: #fefefe;
  border-color: #007bb5;
}

.rounded-social-buttons .social-button.youtube {
  background: #bb0000;
}

.rounded-social-buttons .social-button.youtube:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {
  color: #bb0000;
  background: #fefefe;
  border-color: #bb0000;
}

.rounded-social-buttons .social-button.instagram {
  background: #125688;
}

.rounded-social-buttons .social-button.instagram:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {
  color: #125688;
  background: #fefefe;
  border-color: #125688;
}

.rounded-social-buttons .social-button.pinterest {
  background: #cb2027;
}

.rounded-social-buttons .social-button.pinterest:before {
  font-family: "FontAwesome";
  content: "";
}

.rounded-social-buttons .social-button.pinterest:hover, .rounded-social-buttons .social-button.pinterest:focus {
  color: #cb2027;
  background: #fefefe;
  border-color: #cb2027;
}

.cafe-name {
  font-family: 'Montserrat', sans-serif; 
  font-weight: 600; 
  font-size: 1.4rem; 
  letter-spacing: .15rem; 
  margin-top: 20px;
  margin-bottom: 0; 
  color: white;
}

@media screen and (max-width: 39.9375em) {
  .cafe-name {
    font-size: 1.1rem; 
  }
} 


.info {
  font-family: 'Montserrat', sans-serif; 
  font-size: .8rem; 
  letter-spacing: .1rem;
  color: #333;
}

@media screen and (max-width: 39.9375em) {
  .info {
    font-size: .7rem; 
    letter-spacing: .05rem;
  }
} 


.phone-number  {
  font-family: 'Montserrat', sans-serif; 
  font-size: 1.4rem;  
  font-weight: 400; 
  letter-spacing: .15rem; 
  color: white;
}

@media screen and (max-width: 39.9375em) {
  .phone-number {
    font-size: 1.1rem; 
  }
} 


.phone-number:hover {
  color: #666;
  font-weight: 700; 
}


.hours {
  font-size:.8rem;
  font-weight: 400; 
  letter-spacing: .1rem;
}

@media screen and (max-width: 39.9375em) {
  .hours {
    font-size: .7rem; 
    letter-spacing: .05rem;
  }
} 


.copyright {
  margin-top: 20px; 
  font-family: 'Montserrat', sans-serif;  
  font-weight: 400;
  font-size: .5rem; 
  letter-spacing: .075rem; 
  color: #333;
}

@media screen and (max-width: 39.9375em) {
  .copyright {
    font-size: .4rem; 
    font-weight: 400;
    letter-spacing: .05rem;
  }
} 

HTML:

<body>

   ...

   <!-- Footer --> 

    <div class="extended-footer">

       <div class="row">

         <div class="small-12 columns">

 

          <div class="rounded-social-buttons">

            <a class="social-button facebook" href="https://www.facebook.com/froggysfrenchcafe/"></a>

            <a class="social-button linkedin" href="https://www.linkedin.com/company/3893174/"></a>

            <a class="social-button youtube" href="https://www.youtube.com/watch?v=5AxN9Hp_TSk"></a>

            <a class="social-button instagram" href="https://www.instagram.com/explore/locations/235862736/froggys-french-cafe/"></a>

            <a class="social-button pinterest" href="https://www.pinterest.com/froggyscatering/"></a>

          </div>

        </div> <!-- end small-12 columns -->

 

        <div class="small-6 small-centered columns text-center">

 

          <h5 class="cafe-name">     

            FROGGY'S FRENCH CAFE    

          </h5>

          <p class="info">

            306 GREEN BAY RD., HIGHWOOD, IL 60040 

          </p>

 

          <p>

            <a class="phone-number" href="tel:847-433-7080">

            847-433-7080

            </a>

          </p>

 

          <p class="info">

            LUNCH: &nbsp;MON-FRI <span class="hours">(11:30am-2pm)</span>

            <br>

            DINNER: &nbsp;MON-THURS <span class="hours">(5-10pm)</span>&nbsp;&nbsp;|&nbsp;&nbsp;FRI-SAT <span class="hours">(5-11pm)</span>

            <br>

            CLOSED SUNDAY

          </p>

 

          <p class="copyright">

            COPYRIGHT &copy; FROGGY'S FRENCH CAFE

            <br>

            WEBSITE DESIGN: STEVE JULIUSSON

          </p>

        </div> <!-- end small-12 columns -->

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

    </div>

 

 

    <script src="js/vendor/jquery.js"></script>

    <script src="js/vendor/what-input.js"></script>

    <script src="js/vendor/foundation.js"></script>

    <script src="js/app.js"></script>

  </body>

</html>

Rafi Benkual almost 2 years ago

 from the code in your head - there is not link to foundation CSS. Try adding your code into a new download project form here: https://foundation.zurb.com/sites/download.html/