How do I make the images in the footer responsive? - Twitter bootstrap

illage4
March 17, 2016
141 views
3 votes
3 Answers

We’re using BootStrap, and JavaScript for this page, but we’re not sure how to get the footer images responsive. Other elements on the page are responsive however its just the footer images.

I’ve included the entire HTML and CSS code.

/* CSS Document  */

@font-face {
  font-family: futura;
  src: url("../fonts/Futura-Book.ttf");
}
@font-face {
  font-family: futura italic;
  src: url("../fonts/Futura_ICG_Book_Oblique.ttf");
  font-style: italic, oblique;
}
table {
  border-collapse: collapse;
}
.Line {
  border-bottom: 3px solid #6e6e9a;
}
#white {
  color: white;
}
/*--------------------------------ALL PAGES----------------------------------------*/

/*Body Style*/

* {
  font-family: futura, verdana;
  box-sizing: border-box;
}
h1 {
  font-family: futura, verdana;
  text-align: center;
  font-size: 24px;
}
p {
  font-size: 14px;
}
th {
  font-size: 16px;
}
td {
  font-size: 14px;
}
body {
  margin: auto;
  min-width: 600px;
}
/*NAVIGATION STYLE*/

nav {
  list-style-type: none;
  padding: 0px;
  overflow: hidden;
  background-color: #4a486d;
  margin: 0 auto;
  min-width: 100px;
  max-width: 950px;
  text-align: center;
}
#navcontainer {
  width: 100%;
  background-color: #4a486d;
}
#search {
  width: 20px;
  height: 15px;
  padding-right: 6px;
}
nav a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
nav a:hover {
  background-color: #1c1c1c;
  text-decoration: none;
  color: white;
}
nav a:visited {
  background-color: #1c1c1c;
  text-decoration: none;
  color: white;
}
/*JUMBOTRON STYLE*/

.jumbotron {
  text-align: center;
  border-radius: 25px;
  background-color: white;
  padding: 0px;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-top: 30px;
  clear: both;
}
#logo {
  width: 240px;
  height: 140px;
}
/*CONTAINER STYLE*/

.container {
  text-align: center;
  padding: 2%;
  clear: both;
  width: 100%;
  margin: 0 auto;
}
/*BACKGROUND COLOR*/

#backcol {
  height: 100%;
}
/*LEFT LINKS STYLING*/

#sidenav {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  padding-left: 10px;
  width: 16%;
  background-color: #f5f4f9;
  position: absolute;
  height: 55%;
  overflow: auto;
  clear: both;
  text-align: left;
  float: left;
  border-radius: 2px;
}
li a {
  display: block;
  color: #1c1c1c;
  padding: 8px 0 0px 25px;
  text-decoration: none;
  padding: 8px;
}
li a.active {
  text-decoration: none;
  font-weight: bold;
}
li a:hover:not(.active) {
  background-color: #1c1c1c;
  color: white;
  text-decoration: none;
}
#leftNavPadding {
  padding: 10px;
}
#searchbar {
  height: 15px;
  width: 15px;
  margin: 1px;
}
#quick {
  border-radius: 2px;
  padding: 0;
  position: absolute;
  clear: both;
  float: left;
}
/*PIC STYLING*/

#pic {
  width: 50%;
  stroke: #8e8db7;
  stroke-width: 4;
  margin: auto;
}
#pic2 {
  width: 30%;
  stroke: #8e8db7;
  stroke-width: 4;
  margin: auto;
  padding-top: 45px;
  padding-bottom: 57px;
}
/*BUTTON STYLE*/

button {
  background-color: #6e6e9a;
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  display: inline-block;
  font-size: 18px;
  cursor: pointer;
  border-radius: 2px;
  margin: 4px;
}
button:hover {
  background-color: #1c1c1c;
}
.vpButton {
  padding-top: 0px;
}
.profilesButton {
  margin-top: 0px;
}
/*FORM STYLE*/

form {
  text-align: center;
  padding-top: 60px;
}
label.formLabel {
  display: block;
  margin: 10px;
  padding: 10px;
  margin: 0 auto;
  width: 300px;
  font-size: 16px;
  font-weight: bold;
}
#fieldset {
  margin-top: -30px;
  border: 2px solid #515078;
}
#legend {
  color: #515078;
  font-size: 18px;
}
#fieldsetBorder {
  border: 1px dotted #8685a7;
}
#fieldsetBorder2 {
  border: 1px dashed #8685a7;
}
#legendLeft {
  text-align: left;
}
.astrex {
  color: red;
}
.trcolor {
  background-color: #8a87a2;
}
/*FOOTER*/

footer {
  background-color: #b1b2d2;
  color: #1c1c1c;
  text-align: center;
  height: 158px;
  clear: both;
  margin-top: 10px;
}
footer p {
  margin-right: 150px;
  padding-top: 60px;
}
#footlogo {
  float: left;
  margin-left: 0px;
  height: 130px;
  width: 188px;
  margin: 1%;
  padding: 10px;
}
/*SOCIAL MEDIA BUTTONS IN FOOTER*/

.socialMediaButtons {
  float: right;
  margin: 1%;
  padding-top: 40px;
}
.socialMediaButtons:hover {
  background-color: #1c1c1c;
}
/*CONTAINER STYLE*/

#containerWidth {
  width: 960px;
}
/*PROFILE PAGE STYLE*/

#title {
  color: white;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
#title2 {
  color: white;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}
#title3 {
  color: white;
  font-weight: bold;
  font-size: 16px;
  margin-top: 20%;
  text-align: left;
  padding-left: 20px;
}
#title4 {
  color: white;
  font-weight: bold;
  font-size: 16px;
  padding-top: 25px;
  text-align: left;
  padding-left: 20px;
}
#text {
  color: white;
  font-size: 14px;
  text-align: left;
  padding-left: 20px;
}
.topPad {
  padding-top: 40px;
}
.bottomMargin {
  margin-bottom: 800px;
}
.Line td {
  border-bottom: 1px solid #6e6e9a;
}
#enquiryType,
#travel,
#personalMessage,
#optionalMessage {
  padding: 3px;
  margin: 10px;
}
#spaceBottom {
  margin-bottom: 20px;
}
/*---------------------------------------------------------------------*/

/*--------------------------------INDEX PAGE----------------------------------------*/

#arrow {
  float: left;
  padding: 10px;
  margin: 10px;
  position: relative;
}
#introheading {
  font-family: futura bold;
  color: white;
  font-size: 50px;
  padding-top: 10px;
}
#introtext {
  padding: 10px;
  margin: 10px;
  font-family: Futura, sans-serif;
  font-size: 15px;
  color: white;
  text-align: justify;
  line-height: 1.5em;
}
#heximages {} #hexstyle {
  height: 18%;
  width: 18%;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}
#back {
  padding-top: 20px;
  padding-bottom: 150px;
  margin-bottom: 0px;
}
#col {
  background-color: #555b8f;
}
/*---------------------------------------------------------------------*/

/*--------------------------------LOGIN PAGE START----------------------------------------*/

#divContainer2 {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: relative;
}
#introDiv {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  padding-top: 120px;
  background-image: url(../images/login.jpg);
  background-repeat: no-repeat;
  background-size: 550px 550px;
}
/*BUTTON STYLING*/

.buttonlayout {
  width: 150px;
  height: 60px;
  padding: 3.5px 3px;
  font-size: 18px;
  font-family: futura;
  margin: 10px auto;
}
#guestButton {
  margin-top: -1px;
  padding: -3.5px -3px;
}
.displayBlock {
  display: block;
  width: 150px;
  height: 60px;
  padding: 3.5px 3px;
  margin: 0 auto;
  margin-bottom: 20px;
  font-size: 18px;
  font-family: futura;
}
#logInDiv {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: absolute;
  padding-top: 80px;
  background-image: url(../images/login.jpg);
  background-repeat: no-repeat;
  background-size: 550px 550px;
}
#logInForm {
  margin: 0 auto;
  width: 350px;
}
input.form {
  font-family: futura italic;
  padding: 3px;
  margin: 10px;
  border-radius: 2px;
  border: 1px solid #1c1c1c;
  height: 30px;
  font-size: 14px;
  width: 200px;
  text-align: center;
  color: #6e6e9a;
}
#registerDiv {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  background-image: url(../images/login.jpg);
  background-repeat: no-repeat;
  background-size: 550px 550px;
}
#registerForm {
  text-align: center;
  margin-top: 80px;
}
/*--------------------------------LOGIN PAGE FINISH----------------------------------------*/

/*--------------------------------MY PROFILE----------------------------------------*/

/* hide nav button */

#hide {
  float: left;
  left: 0px;
  top: 0px;
  margin: 5px;
}
.clear {
  clear: both;
}
/*HEXAGON PROFILE IMAGE STYLING*/

svg {
  width: 19%;
  stroke: #8e8db7;
  stroke-width: 4;
}
#profileInfo {
  width: 90%;
  height: 750px;
  background-color: #6a6cae;
  margin: 0 auto;
  z-index: 3;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  padding: 10px;
}
.profileback {
  text-align: center;
  padding: 2%;
  clear: both;
  width: 100%;
  margin: 0 auto;
  background-image: url(../images/back.jpg);
  background-repeat: no-repeat;
}
input[type="file"] {
  display: none;
}
.custom-file-upload {
  padding: 6px 12px;
  cursor: pointer;
  background-color: none;
  position: absolute;
  right: 70px;
  width: 54px;
}
#marginBottom {
  margin-bottom: 50px;
}
/*---------------------------------------------------------------------*/

/*--------------------------------POD SEARCH PAGE START---------------------------------------*/

#basictxt {
  text-align: left;
  padding: 11px;
  padding-bottom: 24px;
  margin: 5px;
}
#quote {
  text-align: left;
  color: #4a486d;
  font-size: 16px;
  padding: 10px;
  padding-top: 65px;
}
.hireButton {
  padding-top: 5px;
  width: 70px;
  padding: 5px;
}
#hireSize {
  width: 70px;
  height: 70px;
}
/*--------------------------------POD SEARCH PAGE FINISH---------------------------------------*/

/*--------------------------------POD PROFILE PAGE START----------------------------------------*/

#enquire {
  width: 150px;
  height: 50px;
  margin: 0px;
  margin-top: -10px;
  margin-bottom: 50px;
}
#divContainer {
  width: 700px;
  height: 700px;
  margin: 0 auto;
  margin-bottom: 5%;
}
#skills {
  width: 330px;
  height: 750px;
  background-color: #6e6e9a;
  margin: 0 auto;
  float: left;
  z-index: 2;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
#skilllist {
  color: white;
  font-weight: bold;
  font-size: 16px;
  margin-top: 20%;
  text-align: left;
  padding-left: 20px;
  list-style-type: none;
}
#bio {
  width: 330px;
  height: 750px;
  background-color: #8a83d1;
  margin: 0 auto;
  float: left;
  margin-left: -150px;
  z-index: 3;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  padding: 10px;
}
#workHistory {
  width: 330px;
  height: 750px;
  background-color: #6a6cae;
  margin: 0 auto;
  float: left;
  margin-left: -150px;
  z-index: 1;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  text-align: center;
}
/*--------------------------------POD PROFILE PAGE FINISH---------------------------------------*/

/*--------------------------------BOOK NOW PAGE START----------------------------------------*/

label {
  display: inline-block;
  width: 220px;
  font-size: 16px;
  font-weight: bold;
}
input.form1 {
  font-family: futura italic;
  padding: 3px;
  margin: 10px;
  border-radius: 2px;
  border: 1px solid #1c1c1c;
  height: 30px;
  font-size: 14px;
  width: 200px;
  text-align: center;
  color: #6e6e9a;
}
#booknowFieldset {
  border: 1px dashed;
}
/*--------------------------------BOOK NOW PAGE FINISH----------------------------------------*/

/*--------------------------------CURRENT BOKINGS PAGE START---------------------------------------*/

#currentBookingTable,
.bookingtr,
.bookingtd {
  text-align: center;
  margin: 10px;
}
.bookingtd {
  max-width: 400px;
  min-width: 50px;
}
/*--------------------------------CURRENT BOKINGS PAGE FINISH---------------------------------------*/

/*--------------------------------HISTORIC BOOKING----------------------------------------*/

#Table,
th,
td {
  margin: 10px;
  padding: 10px;
}
/*TABLE STYLING*/

table,
th,
td {
  text-align: center;
  margin: 10px;
  margin-left: 20%;
}
td {
  max-width: 300px;
  min-width: 100px;
  min-height: 300%;
  margin: 10px;
  background-color: white;
}
th {
  padding: 10px;
  color: white;
}
/*---------------------------------------------------------------------*/

/*--------------------------------CONTACT US----------------------------------------*/

input.inputstyle {
  font-family: futura italic;
  padding: 3px;
  margin: 10px;
  border-radius: 2px;
  border: 1px solid #1c1c1c;
  height: 30px;
  font-size: 14px;
  width: 200px;
  text-align: center;
  color: #6e6e9a;
}
#color {
  background-color: white;
}
/*---------------------------------------------------------------------*/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Login page</title>
  <!-- Bootstrap core CSS -->
  <link href="bootstrap.min.css" rel="stylesheet">


  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href="ie10-viewport-bug-workaround.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="offcanvas.css" rel="stylesheet">

  <link rel="stylesheet" href="stylesheets/stylesheetnew.css" type="text/css" />


  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body id="backColor">
  <nav class=" navbar-fixed-top navbar-inverse" style="background-color:#4a486d">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href='my-profile.html' style="color:red">My Profile</a> 
            <li><a href='pod-search.html'>POD Search</a>
            </li>
            <li> <a href='current-bookings.html'>Current Bookings</a> 
            </li>
            <li> <a href='historic-bookings.html'>Historic Bookings</a>
            </li>
            <li><a href='contact-us.html'>Contact Us</a> 
            </li>
            <li><a href='index.html'>Log Out</a> 
            </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
    <!-- /.container -->
  </nav>
  <!-- /.navbar -->


  <div class="row row-offcanvas row-offcanvas-right">

    <div class="col-xs-12">



      <div class="row">
        <div class="col-sm-5">
          <img src="images/arrowtest.png" id="arrow" class="img-responsive" />
        </div>

        <div class="col-sm-7">
          <h1 id="introheading"> Hello,<br>Welcome to Pod</h1>

          <p id="introtext">SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
            into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through
            the sale of this services.
          </p>

          <p id="introtext">SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
            into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through
            the sale of this services.
          </p>

          <p id="introtext">SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
            into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through
            the sale of this services.
          </p>

          <p id="introtext">SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
            into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through
            the sale of this services.
          </p>
        </div>
      </div>


      <div class="row">
        <div class="col-xs-12 col-lg-12">

          <div class="text-center">
            <img id="hexstyle" src="images/seed.png" alt="logo" />


            <img id="hexstyle" src="images/nurture.png" alt="logo" />


            <img id="hexstyle" src="images/grow.png" alt="logo" />
          </div>

        </div>
        <!--/.col-xs-6.col-lg-4-->



      </div>
      <!--/row-->
    </div>
    <!--/.col-xs-12.col-sm-9-->


  </div>
  <!--/row-->


  <footer>

    <div class="row">

      <div class="col-md-4 col-xs-4">
        <img src="images/logo.png" id="footlogo" class="img-responsive" />
      </div>

      <div class="col-md-4 col-xs-4">
        <p id="white">&copy; SharpFutures 2016 / other info</p>
      </div>



      <div class="col-md-4 col-xs-4">

        <a href="https://www.youtube.com/channel/UCl3eUMCjIUcDAgyJDi0lalA" target="_blank">
          <img class="socialMediaButtons" src="images/social-media-buttons/youtube-logo-white.png" onmouseover="this.src='images/social-media-buttons/youtube-logo-red.png'" onmouseout="this.src='images/social-media-buttons/youtube-logo-white.png'" />
        </a>

        <a href="https://www.facebook.com/groups/174646469548854/" target="_blank">
          <img class="socialMediaButtons" src="images/social-media-buttons/facebook-logo-white.png" onmouseover="this.src='images/social-media-buttons/facebook-logo-blue.png'" onmouseout="this.src='images/social-media-buttons/facebook-logo-white.png'" />
        </a>

        <a href="https://twitter.com/SharpFutures" target="_blank">
          <img class="socialMediaButtons" src="images/social-media-buttons/twitter-logo-white.png" onmouseover="this.src='images/social-media-buttons/twitter-logo-blue.png'" onmouseout="this.src='images/social-media-buttons/twitter-logo-white.png'" />
        </a>

        <a href="contact-us.html" target="_blank">
          <img class="socialMediaButtons" src="images/social-media-buttons/email-logo-white.png" onmouseover="this.src='images/social-media-buttons/email-logo-purple.png'" onmouseout="this.src='images/social-media-buttons/email-logo-white.png'" />
        </a>
      </div>

    </div>







    </div>



    <!--ADDED IN THE ACTUAL COPYRIGHT SYMBOL-->






  </footer>

  <!--/.container-->


  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="ie10-viewport-bug-workaround.js"></script>
  <script src="offcanvas.js"></script>
</body>

</html>

Answers

- yusufshakeel
- March 17, 2016 at 11:20 am
- 0 votes
0
you can use the following.
```
<img class="img-responsive" src="/path/to/image/file">
```
you can also check bootstrap

http://getbootstrap.com/css/#images
Login or Signup to reply.

- danielleabenes
- March 17, 2016 at 11:23 am
- 0 votes
0
Add size (width and height) to the container of the image then add width:100%; to the img element itself.

Login or Signup to reply.

- DanielMackenzie
- March 17, 2016 at 11:32 am
- 0 votes
0
It looks like you’ve set the width and height in the css :
```
#footlogo {
  float: left;
  margin-left: 0px;
  height: 130px;
  width: 188px;
  margin: 1%;
  padding: 10px;
}
```
Have you tried removing this and applying the class of “img-responsive”?
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

How do I make the images in the footer responsive? – Twitter bootstrap

Answers