Boostrap nakładanie się obrazka na stopkę

0

Witajcie, mam taki problem:

947bf07492.png

Chciałbym aby obrazek został w belce wyżej i nie nachodził na stopkę. Przy normalnej rozdzielczości jest wszystko ok. Sprawa się komplikuje gdy strona jest wyświetlana na komórce. Nadałem klasę odpowiadającą za responsywne obrazki ale nie działa to pionowo.
Kod:

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

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

     <link href="css/bootstrap.css" rel="stylesheet">

     <link href="css/style.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open Sans">

    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<style>
    img {
        display: inline-block;
        height: auto;
        max-width: 100%;
    }
    .img-responsive-wrap img{
        display: block;
         overflow: hidden;
        position: relative;
    }
</style>
</head>


<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">



     <section id="about" class="main-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12" >
                    <span class="img-responsive-wrap">
                        <img src="qr.gif" class="img-responsive center-block" alt="">
                    </span>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <p class="text-muted" style="text-align: center">Kontakt: <a href="/cdn-cgi/l/email-protection#d1a2bea2b0a1a191bcb0b8bdffb2bebc"><span class="__cf_email__" data-cfemail="bfccd0ccdecfcfffd2ded6d391dcd0d2">[email&#160;protected]</span><script cf-hash='f9e31' type="text/javascript">
/* <![CDATA[ */!function(){try{var t="currentScript"in document?document.currentScript:function(){for(var t=document.getElementsByTagName("script"),e=t.length;e--;)if(t[e].getAttribute("cf-hash"))return t[e]}();if(t&&t.previousSibling){var e,r,n,i,c=t.previousSibling,a=c.getAttribute("data-cfemail");if(a){for(e="",r=parseInt(a.substr(0,2),16),n=2;a.length-n;n+=2)i=parseInt(a.substr(n,2),16)^r,e+=String.fromCharCode(i);e=document.createTextNode(e),c.parentNode.replaceChild(e,c)}}}catch(u){}}();/* ]]> */</script></a> </p>
        </div>
    </footer>

<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementsByTagName("a"),t=document.createElement("textarea");for(i=0;l.length-i;i++){try{a=l[i].getAttribute("href");if(a&&a.indexOf("/cdn-cgi/l/email-protection") > -1  && (a.length > 28)){s='';j=27+ 1 + a.indexOf("/cdn-cgi/l/email-protection");if (a.length > j) {r=parseInt(a.substr(j,2),16);for(j+=2;a.length>j&&a.substr(j,1)!='X';j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}j+=1;s+=a.substr(j,a.length-j);}t.innerHTML=s.replace(/</g,"&lt;").replace(/>/g,"&gt;");l[i].setAttribute("href","mailto:"+t.value);}}catch(e){}}}catch(e){}})();
/* ]]> */
</script>
</body>

</html>
0

Trudno coś powiedzieć, może gdybyś dał link do strony byłoby łatwiej. Spróbuj dać col-xs-12, bo Twój col-lg-12 jest wyłączany już przy 1200px, nie mówiąc o komórce..

Swoją drogą Twój obrazek ma takie style:

display: block;
overflow: hidden;
position: relative;
height: auto;
max-width: 100%;

.img-responsive-wrap img ten selector chyba nie miał tak wyglądać, bo targetuje Ci obrazek, a to wszystko rozwala.

0

cos pokopales w swoich stylach, bo twoj uklad strony + domyslny bootsrap daje normalny efekt: http://jsbin.com/varimojoha/edit?html,output

wiec jakis twoj styl nadpisuje poprawne dzialanie.

ale to nic z tego co tutaj pokazales

1 użytkowników online, w tym zalogowanych: 0, gości: 1