Solution 1 :

your comment FOOTER, should be wrapped to open and close the comment /*FOOTER*/ if this is in your live code, every rule after *FOOTER*/ will not work

Solution 2 :

You might have forgotten to import the stylesheet for the fonts and forgotten to add / before the FOOTER comment in your CSS.

Here is a working snippet.

.xx-socialmedia-buttons{
font-size: 2.25rem;
align-content: center;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
border-radius: 50%;
padding: 0px 15px;
font-weight: 400;
color: #fff;
}

.fa-facebook {
width: 11px;
height: 13px;
}


nav ul, footer ul {
font-family:'Helvetica', 'Arial', 'Sans-Serif';
padding: 0px;
list-style: none;
font-weight: bold;
}

nav ul li, footer ul li {
display: inline;
margin-right: 0px;
}

/*FOOTER*/
.xx-main-footer {
background-color: rgb(161, 216, 238);
align-content: center;
align-items: center;
text-align: center;
justify-content: center;
margin: 0 auto;
}

.xx-main-footer ul {
margin: 0px auto;
padding: 1rem 1rem 1rem 1rem;
}

.xx-main-footer .xx-socialmedia-buttons {
color: rgb(79, 41, 88);
padding: 0px 30px;
}

.xx-main-footer .xx-socialmedia-buttons  { 
opacity: 0.6;
color: rgb(79, 41, 88);
cursor: pointer;
text-decoration: none;
justify-self: center;
padding: 0px 30px;
}

.xx-main-footer .xx-socialmedia-buttons 
.xx-main-footer .xx-socialmedia-buttons {
opacity: 0.3;
}
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<footer class="xx-main-footer">
    	<div class="xx-socialmedia-buttons">
    		<ul>
    			<li><a href="xxx">email me</a></li>
    			<!-- <li><a href="xxx">github.com/xx</a></li> -->
    			<li><a href="xxx" target="_blank" class="fa fa-github"></a></li>
    			<li><a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-linkedin"></a></li>
    			<li><a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-facebook"></a></li>
    			<li><a href="https://www.instagram.com/xxx"rel="noopener noreferrer" target="_blank" class="fa fa-instagram"></a></li>
    			<li><a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-youtube"></a></li>
    			<li><a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-pinterest"></a></li>
    		</ul>
    	</div>
    </footer>

Problem :

hello im new to css and html so sorry if this is SUPER basic but i’ve tried some stuff from the tinkernet and can’t find something that will work (its probably a simple solution and ive over complicated it)

basically, i want my nav bar and social media buttons at the top and bottom of the page (Resp) to be showing on the ‘about’ and ‘cv’ pages, which both use the default layout. They look like they are using the css but the only thing that isnt working the the social media buttons. they are ‘there’ as clickable links, but just not visible.. any ideas?

    .xx-socialmedia-buttons .fa {
        font-size: 2.25rem;
        align-content: center;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        padding: 0px 15px;
        font-weight: 400;
        color: #fff;
    }
    
    .fa-facebook {
        width: 11px;
        height: 13px;
    }
    
    .fa:hover {
        opacity: 0.3;
    }
    
    nav ul, footer ul {
        font-family:'Helvetica', 'Arial', 'Sans-Serif';
        padding: 0px;
        list-style: none;
        font-weight: bold;
    }
    
    nav ul li, footer ul li {
        display: inline;
        margin-right: 0px;
    }
        *FOOTER*/
        .xx-main-footer {
            background-color: rgb(161, 216, 238);
            align-content: center;
            align-items: center;
            text-align: center;
            justify-content: center;
            margin: 0 auto;
        }
        
        .xx-main-footer ul {
            margin: 0px auto;
            padding: 1rem 1rem 1rem 1rem;
        }
        
        .xx-main-footer .xx-socialmedia-buttons .fa {
            color: rgb(79, 41, 88);
            padding: 0px 30px;
        }
        
        .xx-main-footer .xx-socialmedia-buttons a { 
            opacity: 0.6;
            color: rgb(79, 41, 88);
            cursor: pointer;
            text-decoration: none;
            justify-self: center;
            padding: 0px 30px;
        }
        
        .xx-main-footer .xx-socialmedia-buttons .fa:hover,
        .xx-main-footer .xx-socialmedia-buttons a:hover {
            opacity: 0.3;
        } 
    <footer class="xx-main-footer">
    	<div class="xx-socialmedia-buttons">
    		<ul>
    			<li><a href="xxx">email me</a></li>
    			<!-- <li><a href="xxx">github.com/xx</a></li> -->
    			<li><a href="xxx" target="_blank" class="fa fa-github"></a></li>
    			<li><a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-linkedin"></a></li>
    			<li><a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-facebook"></a></li>
    			<li><a href="https://www.instagram.com/xxx"rel="noopener noreferrer" target="_blank" class="fa fa-instagram"></a></li>
    			<li><a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-youtube"></a></li>
    			<li><a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-pinterest"></a></li>
    		</ul>
    	</div>
    </footer>

I replaced my naming conventions and links with x’s so I hope that doesn’t confuse things…

I’m just wondering, is there a special way to get this to appear on every page because I don’t think I am doing it correctly…

Comments

Comment posted by Elysian Storm

Is it a mistake or not, but you are missing a

Comment posted by user124115

thanks so much! the /* was an error here but it was the import! Silly error but thank you SO much !

Comment posted by Elysian Storm

If the answer was helpful, kindly appreciate the effort by accepting the answer and upvoting it. Cheers 🙂

By

Leave a Reply

Your email address will not be published. Required fields are marked *