Issue
I have created a fixed button at the bottom of the screen for mobile users. But as I scroll the page on my mobile, the button is blinking and also it's not in the center. It works perfectly fine on desktop browser.
It's a full width button placed at the bottom of the screen. Any help would be greatly appreciated. I am using safari browser if that helps. The button blinks when the safari browser bottom bar hides when the user scrolls down.
.fixedbutton {
position: fixed;
bottom: 0;
background-color:#2bde73;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:block;
width: 100%;
color:#ffffff;
font-size:15px;
text-decoration:none;
padding-top: 10px;
padding-bottom: 10px;
}
<div align="center"><span class="fixedbutton">Some text here</span></div>
Here's a gif I have created click here
Solution
Set left: 0 and right: 0; and remove width: 100%;
Don't need of z-index: 9999
I have changed the HTML and CSS of your demo.
Updated Code:
.content {
position: relative;
}
.fixedbutton {
position: fixed;
bottom: 0;
left:0;
right:0;
color: #ffffff;
display: block;
font-size: 15px;
text-decoration: none;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
background-color: #2bde73;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac egestas justo. Aenean enim mi, finibus convallis iaculis sit amet, tristique vitae risus. In porta auctor odio. Aenean porttitor eu nisl in ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus sed turpis eu neque dictum facilisis. Praesent lobortis fringilla consequat.</p>
<p>Cras viverra et ex et convallis. Pellentesque vel tortor ac metus luctus sodales at nec tortor. In non feugiat orci, et hendrerit ante. Praesent urna felis, pellentesque a libero sit amet, imperdiet porttitor augue. Quisque euismod augue sit amet pharetra scelerisque. Donec ac mauris felis. Donec pharetra turpis ipsum, in egestas ipsum elementum sed. Morbi tincidunt egestas felis at sagittis.</p>
<p>Nam iaculis mi vel mauris rhoncus pretium. In lacinia urna non enim rhoncus, eu placerat velit eleifend. Donec aliquet vitae ex id ullamcorper. Donec nec congue elit, vel rhoncus dolor. Integer convallis diam et nisi consequat volutpat. Curabitur finibus, mi quis facilisis finibus, ante nisi scelerisque tortor, vitae maximus nulla quam id magna. Praesent ornare elit sed nulla sagittis, semper efficitur sapien efficitur.</p>
<p>Donec ac purus consequat lorem mollis sagittis at eget massa. Cras diam nisl, tempus ut justo vitae, dignissim aliquet tellus. Nulla euismod leo et luctus dapibus. Nam iaculis velit eget odio suscipit, id commodo arcu tempor. Praesent fringilla nisi diam, quis malesuada lacus consequat ac. Morbi pretium nunc vitae condimentum tristique. Donec iaculis dolor orci, sed tempus nibh fermentum et.</p>
<p>Cras id libero ut risus consequat porttitor quis nec tellus. Nulla faucibus, tellus nec convallis consectetur, diam leo molestie lectus, a auctor est felis a lectus. Etiam eleifend risus urna. Praesent dictum convallis euismod. Maecenas maximus, nulla nec mattis dapibus, ipsum velit porttitor nisl, eget consequat nisl augue et justo. Pellentesque eu laoreet lectus, sit amet semper est. Proin mattis ligula enim, nec facilisis lectus elementum vitae. Proin sit amet varius odio. Praesent nec maximus diam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac egestas justo. Aenean enim mi, finibus convallis iaculis sit amet, tristique vitae risus. In porta auctor odio. Aenean porttitor eu nisl in ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus sed turpis eu neque dictum facilisis. Praesent lobortis fringilla consequat.</p>
<p>Cras viverra et ex et convallis. Pellentesque vel tortor ac metus luctus sodales at nec tortor. In non feugiat orci, et hendrerit ante. Praesent urna felis, pellentesque a libero sit amet, imperdiet porttitor augue. Quisque euismod augue sit amet pharetra scelerisque. Donec ac mauris felis. Donec pharetra turpis ipsum, in egestas ipsum elementum sed. Morbi tincidunt egestas felis at sagittis.</p>
<p>Nam iaculis mi vel mauris rhoncus pretium. In lacinia urna non enim rhoncus, eu placerat velit eleifend. Donec aliquet vitae ex id ullamcorper. Donec nec congue elit, vel rhoncus dolor. Integer convallis diam et nisi consequat volutpat. Curabitur finibus, mi quis facilisis finibus, ante nisi scelerisque tortor, vitae maximus nulla quam id magna. Praesent ornare elit sed nulla sagittis, semper efficitur sapien efficitur.</p>
<p>Donec ac purus consequat lorem mollis sagittis at eget massa. Cras diam nisl, tempus ut justo vitae, dignissim aliquet tellus. Nulla euismod leo et luctus dapibus. Nam iaculis velit eget odio suscipit, id commodo arcu tempor. Praesent fringilla nisi diam, quis malesuada lacus consequat ac. Morbi pretium nunc vitae condimentum tristique. Donec iaculis dolor orci, sed tempus nibh fermentum et.</p>
<p>Cras id libero ut risus consequat porttitor quis nec tellus. Nulla faucibus, tellus nec convallis consectetur, diam leo molestie lectus, a auctor est felis a lectus. Etiam eleifend risus urna. Praesent dictum convallis euismod. Maecenas maximus, nulla nec mattis dapibus, ipsum velit porttitor nisl, eget consequat nisl augue et justo. Pellentesque eu laoreet lectus, sit amet semper est. Proin mattis ligula enim, nec facilisis lectus elementum vitae. Proin sit amet varius odio. Praesent nec maximus diam.</p>
<span class="fixedbutton">Anchor Link Here</span>
</div>
Answered By - Sayed Rafeeq
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.