I am encountering an issue with white space at the bottom of my mobile-responsive page. Specifically, I have two overlapping images within a div that I want to position at the bottom of the page, but I am unsure of the correct approach to eliminate this white space.
Here is my HTML:
<div id="wrapper">
<img id="purpleMobile" src="./assets/purpleMobile.svg" alt="Purple" />
<img id="rocketMobile" src="./assets/rocketMobile.svg" alt="Rocket" />
</div>CSS:
#wrapper {
display: flex;
position: relative;
bottom: 1;
left: 0;
width: 100%;
margin-top: auto;
}
#rocketMobile {
left: 0%;
bottom: 0;
position: absolute;
}
#purpleMobile {
right: 0%;
bottom: 0;
position: relative;
}