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: MON-FRI <span class="hours">(11:30am-2pm)</span>
<br>
DINNER: MON-THURS <span class="hours">(5-10pm)</span> | FRI-SAT <span class="hours">(5-11pm)</span>
<br>
CLOSED SUNDAY
</p>
<p class="copyright">
COPYRIGHT © 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>
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/