ARTICLE AD BOX
I have a problem with image, when I add class img-fluid to img, image not resize when I change browser size. I have checked bootstrap 3 with img-responsive and this is the same. I have checked styles (F12) and there is class img-fluid.
Here is HTML:
I have bootstrap.css file in css folder, and bootstrap.js in js folder.
<!DOCTYPE html> <html lang="pl-PL"> <head> <title>Zakopane Siostry Zmartwychwstanki</title> <meta name="description" content="Zakopane Siostry Zakonne" /> <meta name="keywords" content="adoracja, apostolstwo, Bóg, cisza, cr, galeria, Giewont, góry, Jezus, kaplica, klasztor, kontakt, kościół, modlitwa, msza, nocleg, noclegi, odpoczynek, pobyt, pokoje, refleksja, rekolekcje, siostry, spotkania, spotkanie, Tatry, wędrówka, wspólnota, wspólnoty, wypoczynek, zakon, zakonnice, Zakopane, zakopanecr, zdjęcia, zdjęcie, zmartwychwstanki, dom modlitwy, dom rekolekcyjny, dom wypoczynkowy, dom zakonny, domy modlitwy, domy rekolekcyjne, domy wypoczynkowe, domy zakonne, Jezus Chrystus, odpoczynek duchowy, organizacja kościelna, organizacje kościelne, Pan Jezus, Regina mundi, rozmowa z Bogiem, siostry zakonne, siostry zmartwychwstanki, spotkanie z Bogiem, ulica Za Strugiem, ulica Za Strugiem 27, wspólnota zakonna, wspólnoty zakonne, Za Strugiem, Za Strugiem 27, zgromadzenia zakonne, zgromadzenie zakonne" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/index.css" media="screen" /> <link rel="shortcut icon" href="images/favicon.ico" type="image/ico" /> <!--typedjs START--> <link rel="stylesheet" type="text/css" href="typedjs/typedjs.style.css" /> <style> /* code for animated blinking cursor */ @-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-o-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="typedjs/js/typed.js" type="text/javascript"></script> <script> $(function(){ $("#typed").typed({ strings: ["„Regina mundi” – klasztor sióstr zmartwychwstanek,\nz pięknym widokiem na Giewont, w pobliżu Ścieżki pod Reglami,\ni u wejścia do malowniczej Doliny Strążyskiej.\nOd 27 grudnia 1955 roku mieszka w nim Pan Jezus Zmartwychwstały,\nktóry pragnie być nawiedzany i adorowany.\n\n\n^1000Po Panu Jezusie,\nczekają na Państwa w progach domu siostry zmartwychwstanki,\nktóre założyła matka z córką – swoisty ewenement – w XIX wieku,\nkiedy Polski nie było na mapach świata,\nale była w sercach Polek i Polaków,\nktórzy nigdy nie zwątpili w jej zmartwychwstanie,\ni moralne odrodzenie społeczeństwa.\nTymi ideałami żyją również współczesne pokolenia zmartwychwstanek,\no czym będą się mogli Państwo przekonać, odwiedzając nasz klasztor.\n\n\n^1000ZAPRASZAMY"], typeSpeed: 60, // typing speed startDelay: 500, // time before typing starts backSpeed: 0, // backspacing speed backDelay: 15000, // time before backspacing loop: true, contentType: 'html', // or text // defaults to false for infinite loop loopCount: false, callback: function(){ foo(); }, resetCallback: function() { newTyped(); } }); $(".reset").click(function(){ $("#typed").typed('reset'); }); }); function newTyped(){ /* A new typed object */ } function foo(){ console.log("Callback"); } </script> <!--typedjs END--> <script type="text/javascript"> function odliczanie() { var dzisiaj = new Date(); var dzien = dzisiaj.getDate(); if (dzien<10) {dzien = "0"+dzien;} var miesiac = dzisiaj.getMonth()+1; if (miesiac<10) {miesiac = "0"+miesiac;} var rok = dzisiaj.getFullYear(); var godzina = dzisiaj.getHours(); if (godzina<10) {godzina = "0"+godzina;} var minuta = dzisiaj.getMinutes(); if (minuta<10) {minuta = "0"+minuta;} var sekunda = dzisiaj.getSeconds(); if (sekunda<10) {sekunda = "0"+sekunda;} document.getElementById("zegar").innerHTML = godzina+":"+minuta+":"+sekunda+" | "+dzien+"/"+miesiac+"/"+rok; setTimeout("odliczanie()",1000); } </script> </head> <body onload="odliczanie();" id="bg"> <div id="container" class="container"> <div class="row"> <header> <div id="logo"> <img src="images/logo.png" id="image_gora" alt="logo"> </div> <div id="napis"> <h1 id="napis_gora">Siostry Zmartwychwstanki - Zakopane</h1> </div> <div class="clear"></div> </header> <nav> <menu> <li><a href="zakopane-siostry-zmartwychwstanki" id="active">Start</a></li> <li><a href="gory">Góry</a></li> <li><a href="galeria">Galeria</a></li> <li><a href="kronika">Kronika</a></li> <li><a href="kontakt">Kontakt</a></li> <li><a href="bonus">Bonus</a></li> <li><a href="zagadka">Zagadka</a></li> <li><a href="frustrator">Frustr8tor</a></li> <li><a href="szubienica">Szubienica</a></li> <li><a href="sw-pawel">Św. Paweł</a></li> </menu> </nav> <main> <article> <div id="start_chrystus"> <img src="images/start_chrystus.png" class="img-fluid" alt="chrystus"> </div> <!--typedjs START--> <div id="TypedJsText"><span id="typed"></span></div> <!--typedjs END--> </article> </main> <div class="clear"></div> <footer> <div id="stopka_lewa"> <div id="html"> <a href="https://validator.w3.org/#validate_by_input" target="_blank"><img src="images/belka_dol_html5.png" id="html_rozmiar" alt="html5"></a> </div> <div id="css"> <a href="https://jigsaw.w3.org/css-validator/#validate_by_input" target="_blank"><img src="images/belka_dol_css3.png" id="css_rozmiar" alt="css3"></a> </div> <div id="js"> <a href="https://www.site24x7.com/tools/javascript-validator.html" target="_blank"><img src="images/belka_dol_javascript.png" id="js_rozmiar" alt="js"></a> </div> </div> <div id="zegar"></div> <div id="stopka_prawa"> <a href="zagadka.php" id="stopka_napis">Created by CSfC & Team</a> </div> <div class="clear"></div> </footer> </div> </div> <script src="js/bootstrap.js"></script> </body> </html>Here is CSS:
/*html { background-image: url("../images/background_start.jpg"); }*/ #bg { background-image: url("../images/background_start.jpg"); } #container { margin-top: 15px; margin-left: auto; margin-right: auto; margin-bottom: 0; width: 960px; } header { height: 85px; background-color: #808080; } #logo { width: 130px; height: 85px; float: left; display: flex; justify-content: center; align-items: center; } #image_gora { box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1); -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1); -moz-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1); -o-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1); } #napis { width: 830px; height: 85px; float: left; display: flex; justify-content: center; align-items: center; } #napis_gora { color: #830808; font-size: 35px; text-shadow: 4px 4px 6px rgba(255, 255, 255, 1); text-transform: uppercase; } .clear { clear: both; } nav { width: 130px; height: 600px; background-color: #C0C0C0; float: left; } menu { list-style-type: none; text-align: center; padding: 0; position: sticky; top: 0; } nav menu li a { text-decoration: none; color: black; border-bottom: solid; font-size: 25px; line-height: 50px; font-weight: bold; } nav menu li a:hover, nav menu li a#active { font-style: italic; font-weight: normal; border-bottom: none; color: white; background-color: #0080C0; border-radius: 30px; padding: 10px; cursor: pointer; } main { position: relative; width: 830px; height: 600px; background-color: #E0E0E0; float: left; } #start_chrystus { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 808px; height: 569px; } #start_chrystus:hover { opacity: 0; transition: opacity 1s; } footer { height: 85px; background-color: #808080; } #stopka_lewa { width: 130px; float: left; } #html, #css, #js { width: 43px; height: 85px; float: left; display: flex; justify-content: center; align-items: center; } #html:hover, #css:hover, #js:hover { opacity: 0.5; } #html_rozmiar { width: 50px; height: 50px; cursor: pointer; } #css_rozmiar { width: 59px; height: 50px; cursor: pointer; } #js_rozmiar { width: 90px; height: 50px; cursor: pointer; } #zegar { width: 250px; height: 85px; float: left; display: flex; justify-content: center; align-items: center; font-size: 20px; } #stopka_prawa { width: 580px; height: 85px; float: left; display: flex; justify-content: right; align-items: center; font-size: 20px; } #stopka_napis { text-decoration: none; font-style: italic; color: #404040; margin-right: 20px; cursor: pointer; } #stopka_napis:hover { color: #008020; font-weight: bold; }