I have problems with columns, probebly something stupid, I'm just adapting an already existing design without so much coding knowledge.
Problem is: the first two column are working fine, if i add more of them with the same code the images are cutted horizonataly.
The weird things are:
- Problem occurs only online, locally everything works fine
- Problem is only with Chrome, Edge works fine
you can see the website online here: http://raimondocorbatto.it/
Thanks for anybody that will spend some time for helping me.
Here's the code:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.timepicker.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar" data-aos="fade-down" data-aos-delay="500">
<div class="container"><a class="navbar-brand" href="index.html"><strong><p style="color:white">Raimondo</strong> <strong>Corbatto</strong></p></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="index.html" class="nav-link"><strong>Home</strong></a></li>
<li class="nav-item"><a href="bio.html" class="nav-link"><strong>Biografia</strong></a></li>
<li class="nav-item"><a href="contact.html" class="nav-link"><strong>Contatti</strong></a></li>
</ul>
</div>
</div>
</nav>
<!-- END nav -->
<section class="ftco-cover" style="background-image: url(images/bg_1.jpg);" id="section-home" data-aos="fade" data-stellar-background-ratio="0.8">
<div class="container">
<div class="row align-items-center ftco-vh-100">
<div class="col-md-7">
<h1 class="ftco-heading mb-3" data-aos="fade-up" data-aos-delay="500"><p style="color:white">Glass Design</p></h1>
<h2 class="h5 ftco-subheading mb-5 aos-init" data-aos="fade-up" data-aos-delay="600"><p style="color:white">Fusione e Desideri</p></h1>
<p data-aos="fade-up" data-aos-delay="700"> </p>
</div>
</div>
</div>
</section>
<!-- END section -->
<section class="ftco-section" id="section-about">
<div class="container">
<div class="row">
<div class="col-md-12 mb-5" data-aos="fade-up">
<h1 class="ftco-heading heading-thin mb-5">"un'arte nascosta, in costante ricerca di sperimentalismo e contaminazione, che oggi vede nella lavorazione del vetro un punto di arrivo."</h1>
</div>
</div>
</div>
</section>
<!-- END section -->
<section class="ftco-section-2">
<div class="container-fluid">
<div class="section-2-blocks-wrapper row no-gutters">
<div class="img col-sm-12 col-md-5" style="background-image: url('images/image_4.jpg');" data-aos="fade-right"> </div>
<div class="text col-md-6 col-lg-7 d-flex">
<div class="text-inner align-self-center" data-aos="fade-up">
<h3>Vortice dell'amore</h3>
<p>Quadro 45 x 45 cm</p>
</div>
</div>
</div>
</div>
</section>
<section class="section-2-blocks-wrapper-2">
<div class="container-fluid">
<div class="section-2-blocks-wrapper row no-gutters d-flex" style="background: #fafafa;">
<div class="text col-md-5 col-lg-5 col-xl-4 ml-auto d-flex" data-aos="fade-up">
<div class="text-inner align-self-center mr-auto">
<!--<h4 class="text-primary h5">Lorem ipsum dolor sit amet</h4>-->
<h3>Cristallino</h3>
<p>Quadro 40 x 30 cm</p>
<!--<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>-->
</div>
</div>
<div class="img col-md-5 no-gutters ml-auto">
<div class="image" style="background-image: url('images/image_5.jpg'); " data-aos="fade-left"></div>
</div>
</div>
</div>
</section>
<section class="ftco-section-2">
<div class="container-fluid">
<div class="section-2-blocks-wrapper row no-gutters">
<div class="img col-sm-12 col-md-5" style="background-image: url('images/image_6.jpg');" data-aos="fade-right"> </div>
<div class="text col-md-6 col-lg-7 d-flex">
<div class="text-inner align-self-center" data-aos="fade-up">
<h3>Corrente</h3>
<p>Quadro 60 x 60 cm</p>
</div>
</div>
</div>
</div>
</section>
<section class="section-2-blocks-wrapper-2">
<div class="container-fluid">
<div class="section-2-blocks-wrapper row no-gutters d-flex" style="background: #fafafa;">
<div class="text col-md-5 col-lg-5 col-xl-4 ml-auto d-flex" data-aos="fade-up">
<div class="text-inner align-self-center mr-auto">
<!--<h4 class="text-primary h5">Lorem ipsum dolor sit amet</h4>-->
<h3>Arenile</h3>
<p>Quadro 60 x 60 cm</p>
</div>
</div>
<div class="img col-md-5 no-gutters ml-auto">
<div class="image" style="background-image: url('images/image_7.jpg'); " data-aos="fade-left"></div>
</div>
</div>
</div>
</section>
<!-- loader -->
<div> </div>
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v3.2';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>