Social media icons in footer

Kubicixfactor · 2020-03-11 06:27:33

Looking for a bit of CSS help here please! I've just followed Rod's guide on putting the social media icons into the footer. All working fine on an iphone which is encouraging so at least I can see something is working as it should.

On a desktop or an ipad though, the social icons appear as a bulleted list below each other, and the colours don't come through (they're grey). What am I missing here? I'm not at all experienced with CSS by the way, so go easy

CSS is as per Rod's guide:

/*Custom footer with Pangolin social media code*/

.pages-template-id-64 footer {
background-color: white;
border-top: 1px solid black;

}

.social-media-profiles ul {
float: right;
margin: 1.5rem auto;
max-width: 157px;
padding: 0;
position: relative;
}

.social-media-profiles ul li {
float: left;
list-style-type: none;
margin: -8px 4px 4px;
padding: 0 4px;
background-color: #71bdeb;
border-radius: 6px
}

.social-media-profiles a.social_media {
text-decoration: none;
color: white
}

@media screen and ( max-width: 1023px ) {
#footer {
padding: 0 4px 12px;

}
#footer p {
text-align: center;
}
.social-media-profiles ul {
float: none;
}
}

Steve

rod barbee · 2020-03-11 06:30:34

can you post a link to the site?

rod barbee · 2020-03-11 06:34:32

one problem I see is in the first rule: .pages-template-id-64

That was accidentally left in from my initial testing and shouldn't be there. I've since removed it in the post.

but that only affects the footer container's background and border. We'll need a link to site to see what the problem may be.

rod barbee · 2020-03-11 07:14:13

I've tweaked the css a bit in my own site since I posted that. So I just changed a few things in the original post.
it still may need tweaking depending on your own needs.

Kubicixfactor · 2020-03-11 07:19:36

Thanks Rod, I’ll take a look and see how I get on.

Site is www.adecentexposure.co.uk

Steve

rod barbee · 2020-03-11 07:22:04

the social media icons look fine to me (light blue). Try clearing browser cache?

Kubicixfactor · 2020-03-11 07:34:18

That did it, thanks Rod! I’ll have a play around with it.

Thanks for putting the guide up as well, really useful.

Steve

Kubicixfactor · 2020-04-26 18:44:57

Having had a bit of a wild goose chase making this work on my iPhone yesterday (successfully!) I'm just puzzling over one or two desktop formatting issues for the footer. I'm very new to CSS and picking my way through it so sorry if there's something obvious here that I'm missing.

The footer is formatted perfectly when viewed on an iphone/ipad in portrait orientation, with the copyright text and social media icons centred: https://www.adecentexposure.co.uk

What I want to do is replicate that presentation on the desktop display, rather than having the copyright text to the left and the social media icons to the right. Alternatively I want to have the social icons more aligned to the right (so they're level with the fimstrip above). I think my CSS is pretty much as Rod's example, I've played around with some of the float and align settings but can't get this to work the way I'd like to:

footer {

background-color: #70bcea;
border-top: 1px solid black;
text-align: center;
}

.social-media-profiles ul {
float: left;
margin: 0 auto 1.5rem;
max-width: 157px;
padding: 0;
position: relative;
}

.social-media-profiles ul li {
float: right;
list-style-type: none;
/*margin: 0 4px 4px;*/
margin: 0 4px 4px;
padding: 4 4px;
background-color: #70bcea;
border-radius: 6px
}

.social-media-profiles a.social_media {
text-decoration: none;
color: white
}

#footer {
padding: 12px 0;
}

@media screen and ( max-width: 1023px ) {

#footer {

padding: 0 4px 12px;

}
#footer p {

text-align: center;
}
.social-media-profiles ul {

float: none;
}
}

Thanks, great is someone could point me to what I should be looking at. https://www.adecentexposure.co.uk

Steve

rod barbee · 2020-04-26 22:57:16

on my iPad right now so can’t easily probe with rage browser inspector. but looking at your css I see a few syntax errors in these two rules:

.social-media-profiles ul li {
float: right;
list-style-type: none;
/*margin: 0 4px 4px;*/
margin: 0 4px 4px;
padding: 4 4px;
background-color: #70bcea;
border-radius: 6px
}
.social-media-profiles a.social_media {
text-decoration: none;
color: white
}

specifically:
padding: 4 4px; (need to either remove the 4 or add a unit of measure to it, like px)
border-radius: 6px (needs a semi-colon)

color:white (needs semi-colon)

Kubicixfactor · 2020-04-27 02:44:18

Thanks Rod, I've corrected those errors. The line "padding: 0 4px;" is commented out at the moment, it mades two of the icons drop down below the others. I can't get the block of icons where I want them to be though!

Steve

rod barbee · 2020-04-27 04:25:16

the icons are all in one line for me. Have you tried clearing browser cache?
this is what I'm seeing:

Kubicixfactor · 2020-04-27 04:41:45

Hi Rod, ideally I want them to be centred on a desktop display, or alternatively the social icons moved left slightly so they align with the edge of the filmstrip - if I turn my ipad to portrait orientation everything centres perfectly.

Thanks
Steve

rod barbee · 2020-04-27 05:06:09

There are some errors in the html in the responsive grid. I'd suggest changing it to:

<div class="grid_12" id= "footer" style="max-width:1150px; color:white;">
	<img style="padding-bottom:8px;" src="https://adecentexposure.co.uk//backlight/designer/page/image/50" width="1150" class="aligncenter" alt="About A Decent Exposure Photography">
	
			
	<div class= "col_8">
		<p>All content &copy; 2015-2020 A Decent Exposure Photography & Media</p>
	</div>

	<div class="social-media-profiles social-media col_4">
	
		<ul>
			<li><a target="_blank" href="https://www.instagram.com/adecentexposure/" class="social_media fa-lg fa-instagram"></a></li>
			<li><a target="_blank" href="https://www.facebook.com/adecentexposureuk/" class="social_media fa-lg fa-facebook"></a></li>
			<li><a target="_blank" href="https://www.youtube.com/channel/UCc0tK-AiamTSUcu8pWzdzUw" class="social_media fa-lg fa-youtube"></a></li>
			<li><a target="_blank" href="https://twitter.com/adecentexposure" class="social_media fa-lg fa-twitter"></a></li>
			<li><a target="_blank" href="https://www.linkedin.com/in/steve-watts-5b3975118/" class="social_media fa-lg fa-linkedin"></a></li>
			<li><a target="_blank" href="https://www.pinterest.co.uk/adecentexposurephotography/" class="social_media fa-lg fa-pinterest"></a></li>			
		</ul>
	

	</div> <!-- #social-media-profiles -->

</div>

Change the max-width in the div class-"grid_12 to whatever you need it to be. You may need to adjust the padding-left in the column_8 div and padding-right in the column_4 div. You can use the alpha and omega classes to remove the built in padding. for the column_8 div, add the class "alpha"
for the column_4 div, add the class "omega"
These will eliminate the left and right padding, respectively. If you need it eliminated.

you can also change the padding-bottom for the image to whatever looks best.

If you want the copyright text to be centered with the social media icons below and also centered, that can be done too.

Kubicixfactor · 2020-04-27 06:44:17

Thanks a lot Rod, I’ll give that a go, great help as always!

Community @ The Turning Gate

#1 2020-03-11 06:27:33

Social media icons in footer

#2 2020-03-11 06:30:34

Re: Social media icons in footer

#3 2020-03-11 06:34:32

Re: Social media icons in footer

#4 2020-03-11 07:14:13

Re: Social media icons in footer

#5 2020-03-11 07:19:36

Re: Social media icons in footer

#6 2020-03-11 07:22:04

Re: Social media icons in footer

#7 2020-03-11 07:34:18

Re: Social media icons in footer

#8 2020-04-26 18:44:57

Re: Social media icons in footer

#9 2020-04-26 22:57:16

Re: Social media icons in footer

#10 2020-04-27 02:44:18

Re: Social media icons in footer

#11 2020-04-27 04:25:16

Re: Social media icons in footer

#12 2020-04-27 04:41:45

Re: Social media icons in footer

#13 2020-04-27 05:06:09

Re: Social media icons in footer

#14 2020-04-27 06:44:17

Re: Social media icons in footer

Board footer