Using this CSS to display a fixed part at the bottom of the mobile screen, I noticed that it works well on the Samsung Grand Prime but appears narrower on the Samsung J7 Max. Here is the code snippet and images for reference:
.footer {
position: fixed;
left: 0px;
right: 0px;
bottom: 0;
width: 100%;
background-color: #fff;
color: #b1b1b1;
height:65px;
text-align: center;
padding:0px;
-webkit-box-shadow: 0px -3px 3px 0px rgba(133,133,133,1);
z-index:10000;
}
.kafyfooter{
display:block !important;
z-index:10000;}
.footermenu {
width:7%;
background:#fff;
height:100%;
padding:22px;
display:inline;
float:left;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(204,204,204,1);
-moz-box-shadow: inset 0px 0px 1px 1px rgba(204,204,204,1);
box-shadow: inset 0px 0px 1px 1px rgba(204,204,204,1);
}
Samsung Grand Prime Picture: https://gyazo.com/9eaf2240c5d0f91a4d57c3a787598e4f
Samsung J7 Max Picture: https://gyazo.com/2c48dc559c3a5e9948fc0c6b11a8ae71