Making an Image Dynamic - html

Question

I have 2 problems.
I have 2 images at the bottom of my page, and when the browser size shrinks, the images don't resize and get cut off, I have tried have tried to use width: 100% and height: auto. I have tried a media query I found, but nothing seems to be working, I'm pretty new to HTML and CSS so maybe its a problem with my HTML code, I will post it to the bottom for you guys to check out.
Second problem is, I have managed to have my footer element always stick to the bottom of the page regardless of the height of the page, however when the browser size shrinks, the footer is transparent and lies on top of the images, which is obviously ugly. I want the footer to always remain a certain distance away from all other elements and stick to the bottom.
I hope you can help, Thanks :)
body {
font-family: Rajdhani;
color: white;
width: 100%;
height: 100%;
}
/* ============== NAV BAR =================*/
#media (max-width: 992px) {
.navbar-collapse li a {
color: black;
padding: 300px;
}
}
.nav>li>a:focus,
.nav>li>a:hover {
background-color: transparent !important;
color: #CCCCCC;
border-bottom: 3px solid #FFFFFF;
padding-bottom: 5px;
}
.dropdown-menu li,
.dropdown-menu a {
padding: 5px 0px 5px 0px;
margin: 0px;
color: white;
background-color: white;
}
.logo {
width: 7em;
}
.navbar {
font-family: Rajdhani;
}
.collapse .navbar-collapse {
background: black;
}
.navbar-toggle .icon-bar {
background-color: #fff;
margin-top: 5.5em;
}
li a {
color: white;
margin-top: 2.5em;
font-size: 1.5em;
}
#divider1 {
padding: 0px;
margin: 0px;
}
#divider2 {
padding: 0px;
margin: 0px;
}
/* ============== SLIDE 1 =================*/
#slide1 {
background: url(dojo.jpg) 50% 0 no-repeat fixed;
background-size: cover;
height: 450px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
min-height: 100%;
position: relative;
}
/* ============== SLIDE 2 =================*/
#slide2 {
background-color: #fff;
color: #333333;
height: 1150px;
margin: 0 auto;
overflow: hidden;
padding-top: 15px;
position: relative;
padding-bottom: 200px;
}
.headers h1 {
color: white;
display: block;
margin-top: 90px;
font-family: Rajdhani;
text-align: center;
font-size: 80px;
}
.headers2 {
text-align: center;
font-family: Rajdhani;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
width: 85%;
}
.aboutcontent {
font-family: Rajdhani;
margin: 0px 100px 0px 100px;
font-size: 20px;
text-align: center;
}
#aboutimages {
text-align: center;
display: flex;
justify-content: center;
}
.aboutimages1 {
width: 300px;
height: 375px;
margin: 40px 10px 0px 0px;
}
.aboutimages2 {
width: 300px;
height: 375px;
margin: 40px 0px 0px 10px;
}
/* ============== CONTACT BAR =================*/
#contact {
position: absolute;
font-family: Rajdhani;
font-size: 1em;
text-align: center;
bottom: 0;
width: 100%;
height: 260px;
}
#info {
width: 100%;
}
.logo2 {
width: 7em;
padding-bottom: 0.5em;
}
<div id="slide2">
<div class="headers2">
<h2><strong>GOSPORT & FAREHAM'S HOME OF CHAMPIONS!</strong></h2>
<hr>
</div>
<div class="aboutcontent">
<p>CONTENT</p>
<p>CONTENT</p>
</div>
<div id="aboutimages">
<img class="aboutimages1" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<img class="aboutimages2" src="https://listaka.com/wp-content/uploads/2015/07/baby-boy-wearing-hat.jpg">
</div>
<div id="contact">
<div id="info">
<footer>
<hr>
<img class="logo2" src="#"><br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br>
<i class="fab fa-facebook-square fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
<i class="fas fa-envelope fa-2x"></i>
</footer>
</div>
</div>
</div>
I apologise for the mass of code, im not quite sure what it is thats wrong, so thought id try provide enough info. Thanks guys ::)

Answer 1

It will cut off due to the following reason
Parent Property - overflow:hidden;
Child Property - width:300px; (It's in px)
Pixel value will force your image to stay rigid and your hidden overflow will not let your image to grow outside the container.
Solution:
Let's keep overflow:hidden; as it is but add media-query to it
Variations you can try with media-query
As I have shown, you can get 2 images one over another
You can remove px value from your width, and change it with % value
body {
font-family: Rajdhani;
color: white;
/* width: 100%; */
height: 100%;
}
/* ============== NAV BAR =================*/
#media (max-width: 992px) {
.navbar-collapse li a {
color: black;
padding: 300px;
}
}
.nav>li>a:focus,
.nav>li>a:hover {
background-color: transparent !important;
color: #CCCCCC;
border-bottom: 3px solid #FFFFFF;
padding-bottom: 5px;
}
.dropdown-menu li,
.dropdown-menu a {
padding: 5px 0px 5px 0px;
margin: 0px;
color: white;
background-color: white;
}
.logo {
width: 7em;
}
.navbar {
font-family: Rajdhani;
}
.collapse .navbar-collapse {
background: black;
}
.navbar-toggle .icon-bar {
background-color: #fff;
margin-top: 5.5em;
}
li a {
color: white;
margin-top: 2.5em;
font-size: 1.5em;
}
#divider1 {
padding: 0px;
margin: 0px;
}
#divider2 {
padding: 0px;
margin: 0px;
}
/* ============== SLIDE 1 =================*/
#slide1 {
background: url(dojo.jpg) 50% 0 no-repeat fixed;
background-size: cover;
height: 450px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
min-height: 100%;
position: relative;
}
/* ============== SLIDE 2 =================*/
#slide2 {
background-color: #fff;
color: #333333;
height: 1150px;
margin: 0 auto;
overflow: hidden;
padding-top: 15px;
position: relative;
padding-bottom: 200px;
}
.headers h1 {
color: white;
display: block;
margin-top: 90px;
font-family: Rajdhani;
text-align: center;
font-size: 80px;
}
.headers2 {
text-align: center;
font-family: Rajdhani;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
width: 85%;
}
.aboutcontent {
font-family: Rajdhani;
margin: 0px 100px 0px 100px;
font-size: 20px;
text-align: center;
}
#aboutimages {
text-align: center;
display: flex;
justify-content: center;
}
.aboutimages1 {
width: 300px;
height: 375px;
margin: 40px 10px 0px 0px;
}
.aboutimages2 {
width: 300px;
height: 375px;
margin: 40px 0px 0px 10px;
}
/* ============== CONTACT BAR =================*/
#contact {
position: absolute;
font-family: Rajdhani;
font-size: 1em;
text-align: center;
bottom: 0;
width: 100%;
height: 260px;
}
#info {
width: 100%;
}
.logo2 {
width: 7em;
padding-bottom: 0.5em;
}
#media screen and (max-width: 621px) {
#aboutimages {
flex-direction: column;
}
#info {
margin-top: 60px;
}
.aboutimages1 {
margin: auto;
}
.aboutimages2 {
margin: auto;
}
}
<div id="slide2">
<div class="headers2">
<h2><strong>GOSPORT & FAREHAM'S HOME OF CHAMPIONS!</strong></h2>
<hr>
</div>
<div class="aboutcontent">
<p>CONTENT</p>
<p>CONTENT</p>
</div>
<div id="aboutimages">
<img class="aboutimages1" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<img class="aboutimages2" src="https://listaka.com/wp-content/uploads/2015/07/baby-boy-wearing-hat.jpg">
</div>
<div id="contact">
<div id="info">
<footer>
<hr>
<img class="logo2" src="#"><br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br>
<i class="fab fa-facebook-square fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
<i class="fas fa-envelope fa-2x"></i>
</footer>
</div>
</div>
</div>