The code is not working

Hello sir I want to add a code using HTML and CSS in this theme. But this code is not working. But I try another wordpress website where is install another themes in this another themes it’s working fine.

I just want to add two button in a specific post. The post will be sure to static button. It’s working another theme fine but in this newspaper things not work.

My website login username and password:

https://acallgirl.com/wp-admin

The code is in the below section:
<div class=”fixed-buttons”>

<button id=”whatsapp-button”>
<i class=”fab fa-whatsapp fa-3x”></i>
</button>


<button id=”phone-call-button”>
<i class=”fas fa-phone fa-3x”></i>
</button>

</div>

<style>
.fixed-buttons {
position: fixed;
bottom: 20px; /* Adjust the distance from the bottom as needed */
left: 50%; /* Center the buttons horizontally */
transform: translateX(-50%);
z-index: 9999;
text-align: center;
}

.fixed-buttons button {
padding: 10px; /* Adjust the button size as needed */
margin: 5px; /* Adjust the button spacing as needed */
background-color: #0073e6; /* Adjust the button’s background color */
color: black; /* Adjust the button’s text color */
border: none;
cursor: pointer;
}

.fixed-buttons button i {
margin-right: 5px; /* Add spacing between the icon and text */
}

.fixed-buttons button:hover {
background-color: #0054a9; /* Adjust the button’s background color on hover */
}

@media (max-width: 768px) {
.fixed-buttons {
left: 20px; /* Adjust the left distance for mobile and tablet screens */
bottom: 5%; /* Center the buttons vertically */
transform: translateY(-50%);
display: flex;
flex-direction: column;
}

.fixed-buttons button {
padding: 5px; /* Make the buttons smaller for mobile and tablet screens */
margin: 5px 0; /* Add spacing between the buttons */
}

.fixed-buttons button i {
font-size: 24px; /* Increase the icon size for mobile and tablet screens */
}
}
</style>

in post, type means single post.
example : https://acallgirl.com/college-call-girl/

• This reply was modified 2 years by Partha0000.

Can you please share a screenshot or live URL

You provide me a wrong screenshot I just don’t mean it. I provide you the code you provided me a screenshot that is the WordPress by default button I just don’t mean it.
Actually, I need 2 Static button when user scroll the page the button will always be static. For this reason I write the code and its working other WordPress theme fine.
I provide you the login information in the previous session. Please login and go to edit a post. Then select HTML and best the code. Then you can get exact information what I mean by it. The code is below:
<div class=”fixed-buttons”>

<button id=”whatsapp-button”>
<i class=”fab fa-whatsapp fa-3x”></i>
</button>

<button id=”phone-call-button”>
<i class=”fas fa-phone fa-3x”></i>
</button>

</div>

<style>
.fixed-buttons {
position: fixed;
bottom: 20px; /* Adjust the distance from the bottom as needed */
left: 50%; /* Center the buttons horizontally */
transform: translateX(-50%);
z-index: 9999;
text-align: center;
}

.fixed-buttons button {
padding: 10px; /* Adjust the button size as needed */
margin: 5px; /* Adjust the button spacing as needed */
background-color: #0073e6; /* Adjust the button’s background color */
color: black; /* Adjust the button’s text color */
border: none;
cursor: pointer;
}

.fixed-buttons button i {
margin-right: 5px; /* Add spacing between the icon and text */
}

.fixed-buttons button:hover {
background-color: #0054a9; /* Adjust the button’s background color on hover */
}

@media (max-width: 768px) {
.fixed-buttons {
left: 20px; /* Adjust the left distance for mobile and tablet screens */
bottom: 5%; /* Center the buttons vertically */
transform: translateY(-50%);
display: flex;
flex-direction: column;
}

.fixed-buttons button {
padding: 5px; /* Make the buttons smaller for mobile and tablet screens */
margin: 5px 0; /* Add spacing between the buttons */
}

.fixed-buttons button i {
font-size: 24px; /* Increase the icon size for mobile and tablet screens */
}
}
</style>

Hello sir, actually I observed and I see that the CSS position fixed is not working in post type. It’s working in page type. It’s very important to enable in my website can you please fix it. I am just going to provide you the HTML and CSS code.

Html : <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”&gt;

<i class=”fa fa-whatsapp my-float”></i>


<i class=”fa fa-phone my-float1″></i>

Css:
float{
position:Fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}

.my-float{
margin-top:16px;
}

.float1{
position:fixed;
width:60px;
height:60px;
bottom:40px;
left:40px;
background-color:#d3253b;
color:#14FF01;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}

.my-float1{
margin-top:16px;
}

Hello sir sorry for late. You need a screenshot or video I was provide you the YouTube link where the basic problem is. Please fix the problem and provide me how it’s can be solved by me. You can follow the previous conversation where the problem is I also explain it into the video.

Video : https://www.youtube.com/watch?v=XXc7bILj5Fs&ab_channel=TheGirl

<div class=”fixed-buttons”>

<button id=”whatsapp-button”>
<i class=”fab fa-whatsapp fa-3x”></i>
</button>


<button id=”phone-call-button”>
<i class=”fas fa-phone fa-3x”></i>
</button>

</div>

<style>

.fixed-buttons {
position: fixed;
bottom: 20px; /* Adjust the distance from the bottom as needed */
left: 50%; /* Center the buttons horizontally */
transform: translateX(-50%);
z-index: 9999;
text-align: center;
}

.fixed-buttons button {
padding: 10px; /* Adjust the button size as needed */
margin: 5px; /* Adjust the button spacing as needed */
background-color: #FF0000; /* Adjust the button’s background color */
color: black; /* Adjust the button’s text color */
border: none;
cursor: pointer;
}

.fixed-buttons button i {
margin-right: 5px; /* Add spacing between the icon and text */
}

.fixed-buttons button:hover {
background-color: red; /* Adjust the button’s background color on hover */
}

@media (max-width: 768px) {
.fixed-buttons {
left: 20px; /* Adjust the left distance for mobile and tablet screens */
bottom: 5%; /* Center the buttons vertically */
transform: translateY(-50%);
display: flex;
flex-direction: column;
}

.fixed-buttons button {
padding: 15px; /* Make the buttons smaller for mobile and tablet screens */
margin: 10px 0; /* Add spacing between the buttons */
}

.fixed-buttons button i {
font-size: 24px; /* Increase the icon size for mobile and tablet screens */
}
}

</style>

Also Get it : https://docs.google.com/document/d/13B9ddhW1dFju-dquhE1RibvnNvL6dMek52X5Q2kgF54/edit?usp=sharing

You provide me a images link but I cannot open it it is the link: https://i.imgur.com/0rEU3K6.png

I provide you the video please follow the vide. the code is working fine in another wordpress theme

i see its working . and the button is static in this video in deffult themes .