Burcak Burcak - 2 months ago 21
CSS Question

Sticky Bottom Button Only On Mobile

I am planning to add a button which will be sticked to bottom of the screen, centered, only on mobile web site. I don't want it to show on desktop or any other devices.

Can someone help me to write the CSS for it?

All help is appreciated. Thank you very much!

HTML:

<div class="mobileShow">
<a href="tel:+90123123123"><img src="http://cizgiaydinlatma.com/wp-content/uploads/2016/09/pi5MKo6zT.png"></a>
</div>


CSS:

<style type="text/css">
.mobileShow {
display: none;
}
/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.mobileShow {
display: inline;
width: 40%;
position: fixed;
bottom: 0;
margin-left: auto;
margin-right: auto;
}
}
</style>

Answer

You were nearly there! I've put your code in a jsfiddle and tweaked it, so that the button is centred, with the following:

.mobileShow {
  display: none;
}

/* full width of parent */
.mobileShow img{
    width: 100%;
}

/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .mobileShow {
    display: block;
    width: 40%;
    position: fixed;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -20%;
  }
}