How to keep footer located at bottom in mobile and laptop view?

Question

I am trying to set the footer elements align to bottom of page itself in both Web or mobile view , but the problem is with laptop view it works perfectly fine , but when it comes to mobile/tablet views the footer content is shifting in between the screen and not staying intact ... how can i resolve this via CSS ? Also I am using Material UI for parts.

Here is so far what i tried :

import React from 'react';
import { Link } from 'react-router-dom';
import Grid from "@material-ui/core/Grid";
import TelegramIcon from '@mui/icons-material/Telegram';
import TwitterIcon from '@mui/icons-material/Twitter';
import { IconLetterM } from '@tabler/icons';
import { language } from "../pages/language";

const Footer = () => {

    return (
        <>
               {/* <div className="row footer_area" style={{marginLeft:60 , marginRight : 60}}> */}
               <div className="row" style={{marginLeft:40 , marginRight : 50}}>
                    <Grid container className='footer_styles'>
                      <Grid item md={5} xs={4}>
                        <div> 
                            <Link to={"/"}>
                             <img 
                                src="assets/media/seven_white.png" 
                                className="style_logo__QGaEE"
                                alt="Seven-Chain"
                                style={{height:'50px' , width:'50px'}}
                             />
                            </Link>
                        </div>
                        <br/>
                        <h3 style={{color:'white'}}>DAPP © {language[localStorageLang].COPYRIGHT} 2023.{language[localStorageLang].RIGHTS}</h3>
                        <div className='icon-separate'>
                        <Link to={{pathname:"/"}} target="_blank"><span fontSize="large" ><TelegramIcon/></span> </Link>
                        <Link to={{pathname:"/"}}  target="_blank"><span fontSize="large" ><TwitterIcon/></span> </Link>
                        <Link to={{pathname:"/"}}  target="_blank"><span fontSize="large" ><IconLetterM/></span></Link>
                        </div>
                      </Grid>
                      <Grid item md={6} xs={5} style={{marginLeft : 70}} >
                        <h3 style={{color:'white'}}> {language[localStorageLang].DISCLAIMER}  </h3>
                        <h5 style={{color:'white'}}> {language[localStorageLang].DISCLAIMER_CONTENT} </h5>
                      </Grid>
                    </Grid>
            </div>
        </>
    )
}

CSS : 

.footer_styles{
    position: absolute; //tried relative as well works for laptop not mobile view
    bottom: 0;
    width: 100%;
}

 @media (min-width: 320px) and (max-width: 900px) {  

    .footer_styles{
        position: absolute; //tried relative as well works for laptop not mobile view
        bottom: 0;
        width: 100%;
    }
    
} 

Can anyone help me with this ? Much appreciated , Thanks !

Answer 1

You can try using a media query to set the footer to a fixed position on mobile devices. This should ensure that the footer always stays at the bottom of the page on both mobile and desktop devices.

Try adding the following to your CSS:

@media (max-width: 900px) {  
  .footer_styles {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}