Need to leave an image with link in the bottom right corner

Asked

Viewed 421 times

-1

I’m making a real estate website, and I need to leave a Whatsapp icon that redirects the user to the site owner’s Whatsapp. However I need her to be Sticky, stay in the bottom right corner and stay in mobile, he stay in "Absolute" (that goes over everything, but still stay Sticky in the bottom right corner

     <!-- Whatsapp -->
  <a href="http://api.whatsapp.com/send?1=pt_BR&phone=5511997812005" id="link" style="margin-left:94%;">
    <img src="img/whatsapp-symbol-icon-logo-vector.png" id="whats-icon" >
  </a>

css

  #whats-icon{

    position: sticky;
    top:0;
    float: right;
    z-index: 10;
    height: 60px;
    width: 60px;
    margin-right: 15px;
    margin-top:15px;
    margin-bottom: 0px;
  }

   #whats-icon:hover{
    transition: 0.5;
    border: 1px solid white;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
    border-radius: 80px;
   }
html css

  • You want from a certain screen width the position to change from Sticky to Absolute?

  • @hugocsl I want when you have it on desktop, it stays Sticky in the bottom right corner, but when you go mobile I want you to stay Absolute (staying on top of the posts) and also in the bottom right corner

  • You know that when it looks like Absolute and you scroll on the page the button will accompany the scroll and will not be fixed in the right corner right?

  • @hugocsl, then it has as I leave it Sticky on pc and when it is mobile, leave it fixed in the right corner of the screen, but accompanying the scroll of the page?

2 answers

0

Well, this function will identify whether it is mobile or not, in case it is mobile you add everything you find necessary by javascript. Source: Stackoverflow - Identify device

 function detectar_mobile() { 
     if( navigator.userAgent.match(/Android/i)
     || navigator.userAgent.match(/webOS/i)
     || navigator.userAgent.match(/iPhone/i)
     || navigator.userAgent.match(/iPad/i)
     || navigator.userAgent.match(/iPod/i)
     || navigator.userAgent.match(/BlackBerry/i)
     || navigator.userAgent.match(/Windows Phone/i)
     ){
        return true;
      }
     else {
       return false;
      }
    }

If you do not want to do by JS, do by CSS, this way I am identifying if the screen size is at most 600px, here you can edit as you want the icon, but the JS would be better to resolve this situation: "but when getting mobile I want to stay Absolute (getting on top of the publications) and also in the lower right corner"

Source: W3schools - CSS @media Rule

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }

}
  • 1

    In this case, only the @media already solves the problem...

  • He wants to clone the same icon, but however in a different position, so only with CSS will not solve, he needs to create a clone and give .append() before the publication thereof.

  • 1

    With the use of @media he can change position, style, color or anything else... This function adapts by screen size, which was even included in the CSS precisely so you don’t have to worry about doing functions to find out when you’re on mobile. You can search the internet and see how the sites work when they need to make the change of logo, partial or total.

  • in vdd I need it when it is on pc stay Sticky in the upper right corner, but when it is mobile stay Fixed and stay over the real estate publications (not to claim the responsiveness of the site)

0


If I understood it would be this, the button will stay fixed on the screen regardless of the position on the page that the person is

/*Botão flutunte do whatsapp*/

div#whatasapp {
    position: fixed;
    right: 73px;
    bottom: 10px;
    background: #0d7b00;
    z-index: 999;
    padding: 20px;
    border-radius: 50px;
    transition: .5s;
}

div#whatasapp:hover {
    right: 0;
    bottom: 0;
    border-radius: 140px 0px 0px 0px;
    padding: 70px;
    transition: .5s;
}

/*Fim botão flutuante do whatsapp*/
<a href="https://api.whatsapp.com/send?phone=NUMERO" target="_blank"><div id="whatasapp">
<img src="https://i.imgur.com/56kfhje.png" alt="Fale Whatsapp">
</div></a>

  • in vdd I need it when it is on pc stay Sticky in the upper right corner, but when it is mobile stay Fixed and stay over the real estate publications (not to claim the responsiveness of the site)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.