Archived topic
social media icons in footer
12 replies · Started by Sander on January 10, 2023
I want to place social media icons in the footer. (With the Custom HTML block) I've written code for this which shows in DreamWeaver exactly the way I want it. The code also works on another website. However, if I place it in the right website, the icons are below each other and not next to each other. Can you help me?
`
<style>
/* DIVS NEXT TO EACH OTHER */
.row-divs-sm {
text-align: center !important;
width: 180px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
padding-left: 8px;
padding-right: 8px;
}
.row-divs-sm-column {
float: left;
width: 25%;
box-sizing: border-box;
}
.row-divs-sm:after {
content: "";
display: table;
clear: both;
}
.cf {
position: relative;
height: 35px;
width: 35px;
margin: 0 auto;
}
.cf img {
position: absolute;
left: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.cf img.top:hover {
opacity: 0;
}
</style>
</head>
Hi Sander,
I can't seem to see the Custom HTML block. Did you remove it? Can you re-add it, and we'll check what's occurring on the frontend to assess what to do?
Re-add it? Do you mean an empty Custom HTML block? Or with code..? I can't do that because of the customers of the company.
I will make a test page and put there te code: https://www.mywebsite.nl/test-2/
Hi there,
In your HTML - remove the following tags
</head>
<body>
</body>
As the browse will strop them or they will break the page layout.
Does the CSS have to be added in the HTML, try adding it to your child theme instead ( without the <script> tags ).
Sorry....Of course there is no <head> or <body> tag in my Custom HTML code...and of course I add my CSS in a child theme....the Code you mention is only what I used in Dreamweaver!!. You can check https://mywebsite.nl/test-2.
There you can see how I post the code normally :)
Please can you check and help me?
I'll try to explain it again.
I wrote code for displaying social media icons.
With a hover, so that the icon changes color when hovering.
I wrote that with Dreamweaver; an HTML editor.
I often do this this way.
Then I paste the HTML in a ‘Custom HTML block’ and the CSS in a CSS sheet. (Child theme)
I've tested the code and it looks and works fine.
On a website and in Dreamweaver.
Now I want to apply it in a widget in a GeneratePress website (www.mywebsite.nl) but then the icons are displayed vertically and not horizontally…. (see example: https://mywebsite.nl/test-2/
You're CSS isn't loading on screens over 320px, as the CSS above it has a missing } so your CSS is included in the 320px @media query:
See here for where a } is required:
No, it's not missing...on line 646 is a }
I cannot see line 646 in David's screenshot.
David is usually correct issues like this so can you try his suggestion first?
I will try your suggestion.
Are you sure this one isn't supposed to be closed here?
https://www.screencast.com/t/uJgyaZ9m
Unfortunately we cannot go through your custom CSS for you in the support forum here.
If you think some certain CSS isn't working, you can place it at the top of the CSS file to test.
Yeah!
Super!
Thank you so much Leo and David!
Kind regards from Amsterdam!
No problem :)