- This topic has 12 replies, 4 voices, and was last updated 2 years, 8 months ago by
.
-
Posts
-
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>Customer Support
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/
Customer Support
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 }
Customer Support
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/uJgyaZ9mUnfortunately 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 🙂
- You must be logged in to reply to this topic.
