Footer seems to be blocked of by content

  • Resolved kannabanna

    (@kannabanna)


    1 year, 11 months ago

    I tried adding 2 whatsapp flying buttons with HTML custom blog from footer widget. But unfortunately, the buttons seems to be appearing in the way that i dont want
    https://paste.pics/d2ac9ae640f26f89065fa77d8be09896

    From that screenshot, we can see that neither of the buttons appeared on my site. But, if the users scrolled to the bottom of the page (footer section) that 2 whatsapp flying buttons will appear, but still not perfect, and it seems they’ve been blocked of by the site’s content.
    https://paste.pics/2d06922d1486794d7f425f159aac8c62

    Currently, i need to add custom javascript code to the them itself (kalium) to make those 2 buttons appeared.
    https://paste.pics/4f09f9a71878def1e0889aa33210de24

    Are there any way to fix this problem without relying on the custom JS section? cause i need to display another button on a specific post category on the site itself. Also, unfortunately that my support license for the theme is expired, so i can’t contact them directly.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • I’m confused. What exactly is the problem now? In your first screenshot you don’t see any WhatsApp buttons. When I go to the current page I see 2 buttons and when I scroll down I see a third one. All point to the same link target, but are labeled differently.

    Thread Starter kannabanna

    (@kannabanna)

    Sorry if its kinda confusing, but the first 2 button that you see is actually added through custom JS code (see my 3rd screenshot) and the third button that you mentioned is actually added through footer widget. Now, what i want is the button from footer widget to appear not only when you scrolled down, but in the entire section of the sites.

    • This reply was modified 1 year, 11 months ago by kannabanna.

    Add this in Appeareance > Customizer > Additional CSS:

    body .site-footer { z-index: 1000; }

    Thread Starter kannabanna

    (@kannabanna)

    Thank you so much, the solution works perfectly. But i got another small problem. You see, the position of the buttons that i wanted is actually looks like this.
    https://paste.pics/547a369859ea92407bc0305fb06eb532

    But i don’t know why the footer widget altered the position to looks like this.
    https://paste.pics/43b24bfdcfddcd2e654598e01c772ffa

    Is there any way to fix the button’s position to the way that i wanted it to be? Here’s the code that i used to display the button through HTML blocks

    <style>
.float{
	position:fixed;
	bottom:0px;
	right:0px;
	text-align:center;
	z-index:9999999;

}
</style>
<div class="float">
<a href="https://spin.aswaygroup.com/whatsapp/spin/gdm/gdmorganic.com">
<img src="https://gdmorganic.com/wp-content/uploads/2022/11/Button-Beli-Produk.png" width="155px" class="my-float">
<br>
</a><a href="https://spin.aswaygroup.com/whatsapp/spin/gdm/gdmorganic.com">
<img src="https://gdmorganic.com/wp-content/uploads/2022/11/Button-Konsultasi.png" width="155px" class="my-float">
</a>
</div>

    In my case, the buttons are already next to each other. Have you already solved this?

    Thread Starter kannabanna

    (@kannabanna)

    Thanks for getting back, for the first problem it already been solved. But, is there a way to adjust the “beli produk” button above the “konsultasi” one?

    Add this to the float-class:

    width: 160px;

    E.g.:

    .float { width: 160px; }

    Thread Starter kannabanna

    (@kannabanna)

    Thank you so much once again, finally the site looks exactly like i wanted it to be. I can happily say that my issue have finally been solved.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Footer seems to be blocked of by content’ is closed to new replies.