Menu icon Foundation

Foundation Forum

Foundation Forum

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/

Master Foundation's CSS

Get up to speed FAST, learn straight from the experts who built Foundation.

Learn More
Register Today

Get all the answers in our
Foundation Classes

Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.

See Upcomming Classes

Or if you prefer, contact the Foundation Team at training@zurb.com or (408) 341-0600 x635