My social media buttons do not appear correctly

Report · Jun 24, 2021

I followed a YouTube video to learn how to make some cool Social Media Buttons. I have tried copy & pasting his code, but they do not display correctly. They have a hover feature but only the facebook one is showing the icon correctly and the colors. Here are the sections of my code from the header and body.

<title>Social Media Icons | CodingMaker</title>
<style>

@Import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
width: 100%;
place-items: center;
background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
.wrapper .button{
display: inline-block;
height: 45px;
width: 45px;
float: left;
margin: 0 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.wrapper .button:hover{
width: 200px;
}
.wrapper .button .icon{
display: inline-block;
height: 45px;
width: 45px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 45px;
transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1):hover .icon{background: #4267B2;}

.wrapper .button:nth-child(2):hover .icon{background: #1DA1F2;}

.wrapper .button:nth-child(3):hover .icon{background: #E1306C;}

.wrapper .button .icon i{
font-size: 25px;
line-height: 50px;
transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
color: #fff;

.wrapper .button span{
font-size: 20px;
font-weight: 500;
line-height: 50px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1)
span{color: #4267B2;}

.wrapper .button:nth-child(2)
span{color: #1DA1F2;}

.wrapper .button:nth-child(3)
span{color: #E1306C;}

</style>
<script src="https://kit.fontawesome.com/a076d05399.js>"></script>

******************

<div class="col-xl-2">
<div class="wrapper">
<div class="button">
<div class="icon"><i
class="fab fa-facebook-f">
</i></div>
<span>Facebook</span>
</div><br><br>

<div class="button">
<div class="icon"><i
class="fab fa-twitter">
</i></div>
<span>Twitter</span>
</div><br><br>

<div class="button">
<div class="icon"><i
class="fab fa-instagram">
</i></div>
<span>Instagram</span>
</div>

<script src="js/jquery-3.4.1.min.js"></script>

<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script type="text/javascript">
$(function() {
$( "#Slider1" ).slider();
});
</script>
</div></div></div></div></div>

Any guidance would be appreciated

Report · Jun 25, 2021

You have a missing closing } -

.wrapper .button:hover .icon i {

color: #fff;

Add the } and see if that corrects the issue.

Report · Jun 25, 2021

So I went to add the closing, but when I opened dreamweaver, all I get is a blank page with a 1 at the top saying I need to set the document style. I was working on my site until about 1am last night, so I am more than distressed. Does my info sync anywhere? Is there a way to recover my lost page?

Report · Jun 25, 2021

Is the file actually empty? (check the file size from your desktop to verify it's not just a DW glitch)

Unfortunately if the file size is 0kb, unless you set up a Git Repository (you would definitely know if that was done when the site was initially created), have some kind of automated backup system set up, or uploaded the complete file to your server somewhere, you're going to be out of luck.

If you have a file size larger than 0kb, try opening it in Notepad, SimpleText, or some other non-DW text editor. If the html is there, restart your system to clear the glitch from DW. You should then be able to open the file.

Report · Jun 25, 2021

File size was 20kb, but nothing showed up in notepad.

Report · Jun 25, 2021

I'm sorry to say, unless you uploaded it to your server, or had some other backup system in place, you're going to need to start over.

Report · Jun 25, 2021

@Lance5CDA,

It's important to define your local site folder on your local hard drive before you start new projects.

Had you saved your file at least once, you would have something to recover from your site folder.

Going forward, use Ctrl/Cmd + S (save) often during editing sessions.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 25, 2021

I assure you I was saving on a regular basis, I do not know what happened. I am guessing that when I closed out of the file last night, something unexpected happened. I did a live view using chrome, then closed the view and closed dreamweaver, clicking yes to save as it closed, so I have no idea what happened over night.

Lance Peifer
[Email signature/personal info removed by moderator.]

This is a wonderful world, treat everyone you meet with respect and you will be respected, care for others in times of need, and you will always have others who will care for you.

Report · Jun 25, 2021

Which version of DW?

Which OS?

It might be prudent to run a hard drive diagnostic to ensure that disk is healthy.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 25, 2021

DW 21.1 Build 1543

Windows 10 64bit

Report · Jun 27, 2021

So after I lost my site, I re-did the page. I am having problems with my social media icons and footer spaces. I will include a photo and the text of my code on a document attached below.

Report · Jun 27, 2021

For security reasons, I don't download DOCX files from untrusted sources. Sorry.

Please make this simple for everyone. Upload your problem web page to your remote server and post the URL here so we can see everything -- including the external files. Failing that, the less optimal 2nd option is to copy & paste your code (all of it) into a web forum reply with the Code </> icon.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 28, 2021

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Product Page Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">

<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

<title>Social Media Icons | CodingMaker</title>
<style>

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
width: 100%;
place-items: center;
background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
.wrapper .button{
display: inline-block;
height: 35px;
width: 35px;
float: left;
margin: 0 5px;
overflow: hidden;
background: #fff;
border-radius: 30px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.wrapper .button:hover{
width: 200px;
}
.wrapper .button .icon{
display: inline-block;
height: 35px;
width: 35px;
text-align: center;
border-radius: 30px;
box-sizing: border-box;
line-height: 40px;
transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1):hover .icon{
background: #4267B2;
}
.wrapper .button:nth-child(2):hover .icon{
background: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{
background: #E1306C;
}
.wrapper .button:nth-child(4):hover .icon{
background: #ff0000;
}
.wrapper .button:nth-child(5):hover .icon{
background: #7CC04B;
}
.wrapper .button:nth-child(6):hover .icon{
background: #E60023;
}
.wrapper .button .icon i{
font-size: 18px;
line-height: 40px;
transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
color: #fff;
}
.wrapper .button span{
font-size: 15px;
font-weight: 500;
line-height: 40px;
margin-left: 5px;
transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1) span{
color: #4267B2;
}
.wrapper .button:nth-child(2) span{
color: #1DA1F2;
}
.wrapper .button:nth-child(3) span{
color: #E1306C;
}
.wrapper .button:nth-child(4) span{
color: #ff0000;
}
.wrapper .button:nth-child(5) span{
color: #7CC04B;
}
.wrapper .button:nth-child(6) span{
color: #E60023;
}
</style>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><img src="Images/C&C_Logo_300_px.jpg" width="300" height="115" alt=""/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Quick Ship Cabinets</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Quick Ship Cabinets-RTA</a>
<a class="dropdown-item" href="#">Quick Ship Cabinets-Pre-Assembled</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Semi-Custom Cabinets</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Full Access/Frameless</a>
<a class="dropdown-item" href="#">Quality Semi-Custom</a>
<a class="dropdown-item" href="#">Premium Semi-Custom</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Platinum Semi-Custom - Where Dreams Come True!</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Countertops</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Laminate Countertops</a>
<a class="dropdown-item" href="#">Butcherblock Countertops</a>
<a class="dropdown-item" href="#">Corian-Style Solid Surface Countertop</a>
<a class="dropdown-item" href="#">Granite Countertops</a>
<a class="dropdown-item" href="#">Quartz Countertops</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Quick-Ship - Granite &amp; Quartz Countertops</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Other Products</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Cabinet Hardware &amp; Organizers</a>
<a class="dropdown-item" href="#">Cultured Marble Vanity Tops</a>
<a class="dropdown-item" href="#">Backsplash Tile</a>
<a class="dropdown-item" href="#">Shower Surrounds</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container mt-2">
<div class="row">
<div class="col-12">
<div class="jumbotron">
<h1 class="text-center">Cabinets &amp; Countertops of Minnesota</h1>
<div class="row align-content-center">
<div class="col-auto">
<h4 class="text-center">The Best Source for Cabinets &amp; Countertops&nbsp;</h4>
<h4 class="text-center">&nbsp;Serving Home Builders, Contractors, Restoration Contractors, Home Flippers, and Individuals.</h4>
</div>
</div>
</div>
</div>

</div>
</div>
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/aspect_kitchen_1_1200_px.jpg" alt="Aspect_Kitchen_1" title="Aspect_Kitchen_1" id="wows1_0"/></li>
<li><img src="data1/images/aspect_kitchen_2_1200_px.jpg" alt="Aspect_Kitchen_2" title="Aspect_Kitchen_2" id="wows1_1"/></li>
<li><img src="data1/images/fieldstone_applied_molding_cool_island_1200_px.jpg" alt="Fieldstone_Cool Island" title="Fieldstone_Cool Island" id="wows1_2"/></li>
<li><img src="data1/images/fieldstone_he_inset_1200_px.jpg" alt="Fieldstone_HE_Inset" title="Fieldstone_HE_Inset" id="wows1_3"/></li>
<li><img src="data1/images/fieldstone_multifinish_1200_px.jpg" alt="Fieldstone_Multi-Finish" title="Fieldstone_Multi-Finish" id="wows1_4"/></li>
<li><img src="data1/images/north_point_essentials_kitchen_1200_px.jpg" alt="North_Point_Essentials_Kitchen" title="North_Point_Essentials_Kitchen" id="wows1_5"/></li>
<li><img src="data1/images/north_point_premier_catalina_kitchen_1200_px.jpg" alt="North_Point_Premier_Kitchen_1" title="North_Point_Premier_Kitchen_1" id="wows1_6"/></li>
<li><img src="data1/images/north_point_premier_kitchen_1200_px.jpg" alt="North_Point_Premier_Kitchen_2" title="North_Point_Premier_Kitchen_2" id="wows1_7"/></li>
<li><img src="data1/images/north_point_premier_mudroom_1200_px.jpg" alt="North_Point_Premier_Mudroom" title="North_Point_Premier_Mudroom" id="wows1_8"/></li>
<li><img src="data1/images/shiloh_cadet_poplar_1200_px.jpg" alt="Shiloh_Cadet_Poplar" title="Shiloh_Cadet_Poplar" id="wows1_9"/></li>
<li><img src="data1/images/shiloh_kitchen_1200_px.jpg" alt="Shiloh_Kitchen_2" title="Shiloh_Kitchen_2" id="wows1_10"/></li>
<li><img src="data1/images/wbm_shea_pearl_1_1200_px.jpg" alt="WBM_Shea_Pearl_1" title="WBM_Shea_Pearl_1" id="wows1_11"/></li>
<li><img src="data1/images/wc_dartmouth_dark_sable_1_1200_px.jpg" alt="WC_Dartmouth_Dark Sable_1" title="WC_Dartmouth_Dark Sable_1" id="wows1_12"/></li>
<li><img src="data1/images/wc_dartmouth_white_pewter_4_1200_px.jpg" alt="WC_Dartmouth_White_Pewter_4" title="WC_Dartmouth_White_Pewter_4" id="wows1_13"/></li>
<li><img src="data1/images/wc_hanover_grey_2_1200_px.jpg" alt="WC_Hanover_Grey_2" title="WC_Hanover_Grey_2" id="wows1_14"/></li>
<li><img src="data1/images/wd_copenhagen_custom_paint_1200_px.jpg" alt="WD_Copenhagen_Custom_Paint" title="WD_Copenhagen_Custom_Paint" id="wows1_15"/></li>
<li><img src="data1/images/wd_duncan_cherry_carbon_island_1200_px.jpg" alt="WD_Duncan_Cherry_Carbon_Island" title="WD_Duncan_Cherry_Carbon_Island" id="wows1_16"/></li>
<li><img src="data1/images/wd_pacifica_cherry_fireside_kitchen_1200_px.jpg" alt="WD_Pacifica_Cherry_Fireside_Kitchen" title="WD_Pacifica_Cherry_Fireside_Kitchen" id="wows1_17"/></li>
<li><img src="data1/images/ws_elliot_arctic_perimeter_lunar_island_1200_px.jpg" alt="WS_Elliot_Arctic_Perimeter_Lunar_Island" title="WS_Elliot_Arctic_Perimeter_Lunar_Island" id="wows1_18"/></li>
<li><img src="data1/images/ww_eclipse_metro_bigio_gloss_acrylic_1200_px.jpg" alt="WW_Eclipse_Metro_Bigio_Gloss_Acrylic" title="WW_Eclipse_Metro_Bigio_Gloss_Acrylic" id="wows1_19"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Aspect_Kitchen_1"><span><img src="data1/tooltips/aspect_kitchen_1_1200_px.jpg" alt="Aspect_Kitchen_1"/>1</span></a>
<a href="#" title="Aspect_Kitchen_2"><span><img src="data1/tooltips/aspect_kitchen_2_1200_px.jpg" alt="Aspect_Kitchen_2"/>2</span></a>
<a href="#" title="Fieldstone_Cool Island"><span><img src="data1/tooltips/fieldstone_applied_molding_cool_island_1200_px.jpg" alt="Fieldstone_Cool Island"/>3</span></a>
<a href="#" title="Fieldstone_HE_Inset"><span><img src="data1/tooltips/fieldstone_he_inset_1200_px.jpg" alt="Fieldstone_HE_Inset"/>4</span></a>
<a href="#" title="Fieldstone_Multi-Finish"><span><img src="data1/tooltips/fieldstone_multifinish_1200_px.jpg" alt="Fieldstone_Multi-Finish"/>5</span></a>
<a href="#" title="North_Point_Essentials_Kitchen"><span><img src="data1/tooltips/north_point_essentials_kitchen_1200_px.jpg" alt="North_Point_Essentials_Kitchen"/>6</span></a>
<a href="#" title="North_Point_Premier_Kitchen_1"><span><img src="data1/tooltips/north_point_premier_catalina_kitchen_1200_px.jpg" alt="North_Point_Premier_Kitchen_1"/>7</span></a>
<a href="#" title="North_Point_Premier_Kitchen_2"><span><img src="data1/tooltips/north_point_premier_kitchen_1200_px.jpg" alt="North_Point_Premier_Kitchen_2"/>8</span></a>
<a href="#" title="North_Point_Premier_Mudroom"><span><img src="data1/tooltips/north_point_premier_mudroom_1200_px.jpg" alt="North_Point_Premier_Mudroom"/>9</span></a>
<a href="#" title="Shiloh_Cadet_Poplar"><span><img src="data1/tooltips/shiloh_cadet_poplar_1200_px.jpg" alt="Shiloh_Cadet_Poplar"/>10</span></a>
<a href="#" title="Shiloh_Kitchen_2"><span><img src="data1/tooltips/shiloh_kitchen_1200_px.jpg" alt="Shiloh_Kitchen_2"/>11</span></a>
<a href="#" title="WBM_Shea_Pearl_1"><span><img src="data1/tooltips/wbm_shea_pearl_1_1200_px.jpg" alt="WBM_Shea_Pearl_1"/>12</span></a>
<a href="#" title="WC_Dartmouth_Dark Sable_1"><span><img src="data1/tooltips/wc_dartmouth_dark_sable_1_1200_px.jpg" alt="WC_Dartmouth_Dark Sable_1"/>13</span></a>
<a href="#" title="WC_Dartmouth_White_Pewter_4"><span><img src="data1/tooltips/wc_dartmouth_white_pewter_4_1200_px.jpg" alt="WC_Dartmouth_White_Pewter_4"/>14</span></a>
<a href="#" title="WC_Hanover_Grey_2"><span><img src="data1/tooltips/wc_hanover_grey_2_1200_px.jpg" alt="WC_Hanover_Grey_2"/>15</span></a>
<a href="#" title="WD_Copenhagen_Custom_Paint"><span><img src="data1/tooltips/wd_copenhagen_custom_paint_1200_px.jpg" alt="WD_Copenhagen_Custom_Paint"/>16</span></a>
<a href="#" title="WD_Duncan_Cherry_Carbon_Island"><span><img src="data1/tooltips/wd_duncan_cherry_carbon_island_1200_px.jpg" alt="WD_Duncan_Cherry_Carbon_Island"/>17</span></a>
<a href="#" title="WD_Pacifica_Cherry_Fireside_Kitchen"><span><img src="data1/tooltips/wd_pacifica_cherry_fireside_kitchen_1200_px.jpg" alt="WD_Pacifica_Cherry_Fireside_Kitchen"/>18</span></a>
<a href="#" title="WS_Elliot_Arctic_Perimeter_Lunar_Island"><span><img src="data1/tooltips/ws_elliot_arctic_perimeter_lunar_island_1200_px.jpg" alt="WS_Elliot_Arctic_Perimeter_Lunar_Island"/>19</span></a>
<a href="#" title="WW_Eclipse_Metro_Bigio_Gloss_Acrylic"><span><img src="data1/tooltips/ww_eclipse_metro_bigio_gloss_acrylic_1200_px.jpg" alt="WW_Eclipse_Metro_Bigio_Gloss_Acrylic"/>20</span></a>
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->


<div class="container">
</div>
<hr>
<section>

<div class="container mt-4">
<div class="row">
<div class="col-sm-6">
<div class="card">
<img class="card-img-top rounded img-fluid" src="Images/10x10_Kitchen_Layout_480_px.jpg" width="336" height="335" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Basic Kitchens Starting at $3,500.00!</h4>&nbsp;
<h6 class="card-text">Here are the factors that impact the cost of your cabinets.</h6>&nbsp;
<p>1) Construction: Materials and Drawer Box</p>
<p> a) Is the box particle board, furniture board, or plywood?</p>
<p> 1) Quality Rating: Best - Plywood, Better - Furniture Board, Good - Particle Board</p>
<p> b) Is the Drawer Box staple or Dovetail?</p>
<p>2) Finish Quality - Impacted by number of coats, Type of Finish, Number of Oven Cycles</p>
<p>3) Hardware: Hinges &amp; Glides - Best - Soft Close &amp; Full Extension Undermount Soft Close Glides, Better - Soft Close &amp; 7/8 Extension Side Mount Soft Close Glides, Good - Six Way adjustable hinges with Side Mount Glides </p>&nbsp;&nbsp;
<h6> Discuss these factors with your designer before making your final decision on your cabinet purchase. The best value does not always mean the lowest price, but getting the most for the money.</h6>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<img src="Images/Nyhus_360_px.jpg" alt="" width="550" height="442" class="rounded img-fluid"/>&nbsp;
<h4>These photos are examples of just some of the quality work from one of our in-house Kitchen and Bath Designers.</h4>&nbsp;
<img src="Images/Nyhus_Master_Bath_360_px.png" alt="" width="550" height="369" class="img-fluid"/>&nbsp;
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="container py-sm-1"><img src="Images/10x10_Kitchen_WBM_Vero_Shea_576_px.jpg" alt="" width="340" height="214" class="rounded img-fluid"/>
<h6>Above you see a layout of entry level cabinets that would cost a homeowner approximately $3,500 before tax or installation.</h6>
</div>
</div>
<div class="col-sm-4">
<div class="container py-sm-1"><img src="Images/10x10_North_Point_Hatteras_Kitchen_576_px.jpg" alt="" width="340" height="209" class="img-fluid rounded"/>
</div><h6>Above you see a layout of entry level RTA cabinets that would cost a homeowner approximately $4,600 before tax or installation.</h6>
</div>
<div class="col-sm-4 col-xl-4">
<div class="container py-sm-1"><img src="Images/10x10_Kitchen_Dartmouth_576_px.jpg" alt="" width="340" height="219" class="rounded img-fluid"/>
<h6>Above you see a layout of entry level Full Overlay cabinets that would cost a homeowner approximately $6,500 before tax or installation.</h6>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="container py-sm-1"><img src="Images/10x10_Kitchen_Designer_576_px.jpg" alt="" width="340" height="216" class="rounded img-fluid"/>
<h6>Above you see a layout of Semi-Custom cabinets that would cost a homeowner approximately $8,750 before tax or installation.</h6>
</div>
</div>
<div class="col-sm-4">
<div class="container py-sm-1"><img src="Images/10x10_Eclipse_Full_Access_330_px.jpg" alt="" width="340" height="226" class="rounded img-fluid"/>
</div><h6>Above you see a layout of Full Access/Frameless Semi-Custom cabinets that would cost a homeowner approximately $9,500 before tax or installation.</h6>
</div>
<div class="col-sm-4 col-xl-4">
<div class="container py-sm-1"><img src="Images/10x10_Fieldstone_Kitchen_330_px.jpg" alt="" width="340" height="226" class="rounded img-fluid"/>
<h6>Above you see a layout of our Platinum Level Semi-Custom cabinets that would cost a homeowner approximately $10,500 before tax or installation.</h6>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 mb-md-0 mb-2">
<h1>Contact Us</h1>
<address>
<h3>Cabinets &amp; Countertops of Minnesota</h3><br>
<p>Division of Hinze Floor Covering<br>11975 Portland Ave South<br>
Burnsville, MN 55337, US<br>
Phone: (952)303-9033<br>
Email: info@hinzefloorcovering.com
</p>
</address>
</div>
<div class="col-lg-4 col-md-6 col-12">
<h2>Google Maps</h2>
<ul class="list-unstyled">
<li class="media">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d361915.4688763151!2d-93.1578122!3d44.8731933!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87f63aa31de1879d%3A0x5259b5e12af99d90!2sBurnsville%20Heights%20Business%20Center!5e0!3m2!1sen!2sus!4v1624818061951!5m2!1sen!2sus" width="350" height="225" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-10 offset-md-1 col-xl-3">
<h4>Social Media Buttons</h4>
<div class="wrapper">
<div class="row">
<div class="button">
<div class="icon"><i class="fab fa-facebook-f"></i></div>
<span>Facebook</span> </div>
</div>
<div class="row">
<div class="button">
<div class="icon"><i class="fab fa-twitter"></i></div>
<span>Twitter</span> </div>
</div>
<div class="row">
<div class="button">
<div class="icon"><i class="fab fa-instagram"></i></div>
<span>Instagram</span> </div>
</div>
<div class="row">
<div class="button">
<div class="icon"><i class="fab fa-youtube"></i></div>
<span>YouTube</span> </div>
</div>
<div class="row">
<div class="button">
<div class="icon"><i class="fab fa-houzz"></i></div>
<span>Houzz</span> </div>
</div>
<div class="row">
<div class="button">
<div class="icon"><i class="fab fa-pinterest"></i></div>
<span>Pinterest</span> </div>
</div>
</div>
<footer>
<div class="row"
<div class="col-12"
<h5>Copyright ©2021 Cabinets &amp; Countertops of Minnesota, Best source for wholesal

Report · Jun 28, 2021

Something is missing. Your code is probably too verbose for this forum to handle.

Run your code through validation and fix all reported errors.

Window > Results > Validation > check document by Clicking the white triangle.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 29, 2021

There must be other errors in your code which are causing the issue if as you say only the facebook icon slides out. If you isolate your social media icons code and the applicable css then all the icons slide out to expose the associated text, albeit slightly misaligned in terms of being centrally positioned

Report · Jun 29, 2021

I copied and pasted the code from the video I watch and his icons were colored based on the colors entered and the text was centered and colored the same as the icons.

Report · Jun 29, 2021

I copied and pasted the code from the video I watch and his icons were colored based on the colors entered and the text was centered and colored the same as the icons.

By @Lance5CDA

You need to delete ALL of the 'row' divs as the 'buttons' are not 'children' of the 'wrapper' they are 'children' of the 'row' so the css as its set up will not observe the colors.

Your code should look like below, without the 'row' divs. Also note the addition of the 2 css Bootstrap classes 'd-flex' and 'flex-column' applied to the 'wrapper' <div> - this has the effect of forcing your icons to be vertical aligned.

<div class="col-lg-4 col-md-10 offset-md-1 col-xl-3 ">

<h4>Social Media Buttons</h4>

<div class="button">
<div class="icon"><i class="fab fa-facebook-f"></i></div>
<span>Facebook</span>

</div>

<div class="button">
<div class="icon"><i class="fab fa-twitter"></i></div>
<span>Twitter</span>

</div>

<div class="button">
<div class="icon"><i class="fab fa-instagram"></i></div>
<span>Instagram</span>

</div>

<div class="button">
<div class="icon"><i class="fab fa-youtube"></i></div>
<span>YouTube</span>

</div>

<div class="button">
<div class="icon"><i class="fab fa-houzz"></i></div>
<span>Houzz</span>

</div>

<div class="button">
<div class="icon"><i class="fab fa-pinterest"></i></div>
<span>Pinterest</span>

</div>

</div>