javascript - How do I make the images in the footer responsive? -
we're using bootstrap, , javascript page, we're not sure how footer images responsive. other elements on page responsive footer images.
i've included entire html , 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 { 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 { 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 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 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 surface/desktop windows 8 bug --> <link href="ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- custom styles template --> <link href="offcanvas.css" rel="stylesheet"> <link rel="stylesheet" href="stylesheets/stylesheetnew.css" type="text/css" /> <!-- html5 shim , respond.js ie8 support of html5 elements , 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 pod</h1> <p id="introtext">sharpfutures social enterprise supports young people employment in creative digital sector. offering range of interventions including apprenticeships, work experience , volunteering, sharpfutures nurture transition work, whilst responding fluctuating needs of creative digital businesses. seed ideas through services education, nurture best talent offering employment opportunities , real work experience, , grow through sale of services. </p> <p id="introtext">sharpfutures social enterprise supports young people employment in creative digital sector. offering range of interventions including apprenticeships, work experience , volunteering, sharpfutures nurture transition work, whilst responding fluctuating needs of creative digital businesses. seed ideas through services education, nurture best talent offering employment opportunities , real work experience, , grow through sale of services. </p> <p id="introtext">sharpfutures social enterprise supports young people employment in creative digital sector. offering range of interventions including apprenticeships, work experience , volunteering, sharpfutures nurture transition work, whilst responding fluctuating needs of creative digital businesses. seed ideas through services education, nurture best talent offering employment opportunities , real work experience, , grow through sale of services. </p> <p id="introtext">sharpfutures social enterprise supports young people employment in creative digital sector. offering range of interventions including apprenticeships, work experience , volunteering, sharpfutures nurture transition work, whilst responding fluctuating needs of creative digital businesses. seed ideas through services education, nurture best talent offering employment opportunities , real work experience, , grow through sale of 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">© 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 actual copyright symbol--> </footer> <!--/.container--> <!-- bootstrap core javascript ================================================== --> <!-- placed @ end of document 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 surface/desktop windows 8 bug --> <script src="ie10-viewport-bug-workaround.js"></script> <script src="offcanvas.js"></script> </body> </html>
you can use following.
<img class="img-responsive" src="/path/to/image/file"> you can check bootstrap
Comments
Post a Comment