I have a rather basic internet site, which makes a history picture, a header, a footer, and also some body message.
When I check out the website from Google Dev Equipment mobile examiner. The message rests over the footer as anticipated. When I check out the website from a real apple iphone the message is revealed at the extremely lower of the web page (behind the footer).
App.js
return (
<< div className= {style.app} >>.
<< Header setNav= {setNav} nav= {nav}/>>.
<< Paths>>.
<< Path.
precise.
course="/"
component= {
<< Mobile.
setNav= {setNav}
nav= {nav}
menuList= {menuList}
setFilter= {setFilter}
/>>.
}
/>>.
<< Path.
precise.
course="/ instructions"
component= {
<< Instructions.
setNav= {setNav}
nav= {nav}
filter= {filter}
setFilter= {setFilter}
menuList= {menuList}
/>>.
}
/>>.
<.
<< MobileNavOneButton setNav= {setNav} setFilter= {setFilter}/>>.
<.
);
the css for style.app is:
application {
background-image: link("./ CompanyImages/Port507BackgroundImage. jpg");
background-repeat: no-repeat;
background-attachment: dealt with;.
placement: dealt with;.
elevation: 100vh;.
size: 100vw;.
max-height: 100vh;.
max-width: 100vw;.
background-size: cover;.
z-index: -999;.
}
Mobile.js
import React from "respond";.
import design from "./ Mobile.module.css";.
const Mobile = () => > {
return (.
<< div className= {style.app} >>.
<< div className= {style.mainContent} >>.
<< div className= {style.address} >> 128 W second St, Winona, MN 55987<.
<.
<.
);.
};.
export default Mobile;.
css for mobile.js
html,.
body {
margin: 0;.
/ * elevation: 100% */.
}
. application {
elevation: calc( 100vh - 8rem);.
size: 100vw;.
background-size: cover;.
display screen: flex;.
justify-content: facility;.
margin-top: 5rem;.
}
. mainContent {
text-align: facility;.
shade: white;.
size: 100%;.
display screen: flex;.
align-self: flex-end;.
margin-bottom: 1.5 rapid eye movement;.
margin-left: 1rem;.
}
Footer.js
import React from "respond";.
import {useNavigate} from "react-router-dom";.
import design from "./ MobileNavOneButton.module.css";.
import HomeIcon from "@mui/ icons-material/Home";.
import ExploreIcon from "@mui/ icons-material/Explore";.
const MobileNavOneButton = ({setNav}) => > {
const browse = useNavigate();.
return (.
<< div className= {style.NavBar} >>.
<< div.
className= {style.NavButton}
onClick= {() => > {
browse("./ instructions", {change: real} );.
setNav( incorrect);.
}}
>>.
<< ExploreIcon design= {{fontSize: "1.25 rapid eye movement", shade: "# 000000"}}/>>.
<< div className= {style.buttonText} >> Instructions<.
<.
<.
);.
};.
export default MobileNavOneButton;.
css for the footer
buttonText {
font-size: 0.75 rapid eye movement;.
font-family: Montserrat-Light;.
text-decoration: none;.
shade: black;.
}
. NavBar {
size: 100%;.
float: none;.
display screen: flex;.
elevation: 3rem;.
overflow: concealed;.
placement: dealt with;.
base: 0;.
z-index: 999;.
background-color: rgba( 150, 150, 150, 0.8);.
}
. NavButton {
align-items: facility;.
justify-content: facility;.
/ * boundary: 1px strong black; */.
/ * background-color: rgba( 150, 150, 150, 0.8); */.
border-radius: 0;.
float: left;.
display screen: flex;.
flex-direction: column;.
font-size: 1rem;.
font-family: Montserrat-Light;.
text-align: facility;.
size: 100%;.
text-decoration: none;.
shade: # 222222;.
}
. NavButton: emphasis {
overview: none! vital;.
outline-offset: none! vital;.
}
The internet site can be seen below. Keep in mind: you will certainly be rerouted if checking out from an internet browser (demand to be in Dev Equipment mobile)
