I have been working on a bootstrap website and when swapped to mobile view my footer Images stack vertically out of the div. The code and example image are attached.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="JavaScript/index.js" defer></script>
</head>
<body>
<!--Navigation bar-->
<nav id="navbar">
<a href="index.html">
<img src="images/DallE_Extendo-removebg.png" width="80" height="60" alt="">
</a>
<button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarNav">
<ul >
<li >
<a href="index.html">Home</a>
</li>
<li >
<a href="aboutus.html">About us</a>
</li>
<li >
<a href="products.html">Products</a>
</li>
<li >
<a href="contactus.html">Contact us</a>
</li>
</ul>
</div>
</nav>
<!--NavBar Ends-->
<!--Content Begins-->
<div >
<div >
<div style="padding-left:0; padding-right:0;">
<img src="images/Charlie-Co.-Barbershop-West-Chester-3.png" width="100">
<a href="#" >Book now through booksy!</a></div>
</div>
<div >
<div style="padding-left: 0; padding-right: 0;">
<h1 style="text-align: center; text-decoration: underline;">#</h1>
<h1>Opening hours</h1>
<p>Hours could change depending on Holidays & Bank Holidays</p>
<table>
<tr >
<td><span>Monday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr >
<td><span>Tuesday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr >
<td><span>Wednesday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr >
<td><span>Thursday</span></td>
<td>9:30 - 19:00</td>
</tr>
<tr >
<td><span>Friday</span></td>
<td>9:30 - 19:00</td>
</tr>
<tr >
<td><span>Saturday</span></td>
<td>9:00 - 18:00</td>
</tr>
<tr >
<td><span>Sunday</span></td>
<td>11:00 - 15:30</td>
</tr>
</table>
</div>
<div style="padding-left: 0; padding-right: 0;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non ultricies velit, eget suscipit velit. Nam laoreet magna ornare ex ornare ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vel tincidunt velit. Nam sed est metus. Maecenas commodo dolor non lorem semper malesuada. Aliquam tempor blandit sapien in sodales. Integer eu metus efficitur ligula mattis pretium. Donec finibus mi non sodales condimentum. Donec elementum nunc quis mauris pulvinar porta. Sed sed est eget justo vestibulum malesuada vitae at nulla. Suspendisse quis efficitur lorem. Phasellus non ornare ante. Mauris ullamcorper, ligula in malesuada malesuada, purus nibh pretium dui, ac eleifend purus mauris vel nisi. Sed lacinia hendrerit magna at pharetra. Suspendisse quis varius diam, et ultricies dui. In scelerisque felis ac sapien bibendum, eget iaculis nisl egestas. Proin tempor et magna eu molestie. Praesent consequat lorem ut accumsan vehicula. Nunc luctus turpis non sollicitudin fermentum. Fusce nec viverra ex, sit amet tristique turpis.</p>
</div>
</div>
<div >
<div id="footer">
<div style="font-size: 10px;">
<p>#</p>
</div>
<div style="padding-left: 10%; text-align: center;">
<p>#</p>
</div>
<div id="sm" style="padding-left: 10%; padding-bottom: 1%;">
<a href="#"><img src="images/rsz_1rsz_insta.png"></a>
<a href="#"><img src="images/rsz_twitter.png"></a>
<a href="#"><img src="images/rsz_1facebook-removebg-preview.png"></a>
</div>
<div style="padding-left: 5%; text-align: center;">
<p>#<br>#</p>
</div>
</div>
</div>
</div>
<!--Content Ends-->
</body>
</html>
CSS /
* NavBar parameters*/
nav#navbar {
background-color: rgba(0, 0, 0, 0.8) !important;
}
nav#navbar ul.navbar-nav {
display: flex;
margin: 0 auto;
}
/* Image and text over image parameters */
.img {
width: 100%;
z-index: 0;
}
/*#1 media settings for the text link to go to booksy*/
@media (max-width: 768px) {
/* Adjust font size for small screens */
.carousel-caption {
font-size: 1em !important;
padding-bottom: 0;
}
}
.carousel-caption{
font-family: 'Bangers';
font-size: 50px;
color: gold;
}
.carousel-caption:hover{
color: #00E2FF;
}
.col-md-12#footer{
background-color: lightgray !important;
height: 5em;
display: flex;
align-items: flex-end;
}
@media (max-width: 768px) {
/* Adjust font size for small screens */
.col-md-12#footer {
display: flex;
padding-bottom: 0;
}
}
@media (max-width: 768px) {
/* Adjust font size for small screens */
.col-md-5#sm {
size: 1px;
}
}
/*--------------*/
table {
border-collapse: collapse;
}
#activerow {
border: 0.5px solid gold;
}
#activerow > td {
color: gold;
font-weight: 600;
}
#activerow > td > span {
color: gold;
}
/* Table Design */
.opening-hours {
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: white;
padding: 1em;
max-width: 450px;
min-width: 320px;
}
.fvl-d > td {
font-size: 12px;
font-weight: 400;
letter-spacing: 1.2px;
color: #A299AC;
text-transform: uppercase;
padding: 1em;
}
.fvl-d > td > span {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
color: #A299AC;
text-transform: uppercase;
}
@media screen and (max-width: 382px) {
.fvl-d > td {
font-size: 14px;
padding: 15px 5px;
}
#activerow {
border: none;
background-color: gold;
}
#activerow > td {
color: white;
font-weight: 600;
}
#activerow > td > span {
color: white;
}
}
Any ideas you may have please let me know! Stuck on this bit as it stands but any other help would be unreal. Thanks in advance guys!
Example of how it looks on mobile now
CodePudding user response：
I added display: flex; to the footer images div and it worked fine
code :
<div id="sm" style="padding-left: 10%; padding-bottom: 1%;display: flex;">
<a href="#"><img src="images/rsz_1rsz_insta.png"></a>
<a href="#"><img src="images/rsz_twitter.png"></a>
<a href="#"><img src="images/rsz_1facebook-removebg-preview.png"></a>
</div>