I am encountering an issue with the mobile version of a responsive website that I am constructing.
The green "info" DIV seen at the top left corner in the full-screen version needs to be relocated and placed at the bottom of the screen, just above the footer DIV containing all the links, for the mobile version.
View the full-screen version here:
https://i.sstatic.net/ITHsv.jpg
And this is the Mobile version:
https://i.sstatic.net/TIIGM.jpg
This is the CSS for the regular full-screen layout:
#productHoverDIV {
z-index: 20;
position: absolute;
top: 10px;
left: 10px;
width: 300px;
padding: 8px;
}
Here's the mobile rule:
@media screen and (max-width: 414px) {
#productHoverDIV {
z-index: 20;
position: absolute;
bottom: 40px; // height of the FOOTER DIV
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
The problem lies in the fact that despite setting the productHoverDIV to be 40px from the bottom in the mobile layout, it still maintains its top:10px value from the standard CSS rule, resulting in covering most of the screen.
To resolve this, I need to somehow negate the top rule or replace it with a different value. However, determining the appropriate value for top is challenging as every mobile device has varying heights.
What steps should I take to address this issue?