We Keep Coding

Div Wont Hide with JQuery Hide Function

I am setting a div to be hidden by default. When the page loads, I am trying to hide it with jQuery.
I am also using bootstrap
I am pretty new to jquery, so i really appreciate your help
Here is the div in the html file
<!--POP-UP-->
<div class="container hidden d-flex justify-content-center align-items-center" id="prod-pop-up" >
<div class="row pop-up position-fixed">
<div class="circle position-absolute"></div>
<div class="col-5 d-flex align-items-end justify-content-end product-img">
<img class="" src="img/OM Chicharon.png" alt="">
<div class="variants d-flex flex-column">
<button class="btn active">80g</button>
<button class="btn">40g</button>
</div>
</div>
<div class="col-7 d-flex flex-column justify-content-between product-details">
<div class="up d-flex flex-column align-items-end">
<img id="close-pop-up" src="imgs/pop-up-close.svg" alt="">
<div class="product-name d-flex flex-column align-items-end">
<h4>oyster mushroom</h5>
<h1>Chicharon</h1>
</div>
<h3 class="price"><span>PHP</span>119.00</h3>
</div>
<div class="down d-flex flex-column align-items-end">
<p class="text-right prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor condimentum nunc vel euismod. Nam eget risus tortor. Proin a quam at enim tincidunt blandit ac eget justo. </p>
<button class="btn rounded-pill buy-now">BUY NOW</button>
</div>
</div>
</div>
</div>
and heres the js file
$(document).ready(function(){
$("#close-pop-up").click(function(){
$('#toggle').hide();
});});

$(document).ready(function(){
$("#close-pop-up").click(function(){
$('#prod-pop-up').hide();
});});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--POP-UP-->
<div class="container hidden d-flex justify-content-center align-items-center" id="prod-pop-up" >
<div class="row pop-up position-fixed">
<div class="circle position-absolute"></div>
<div class="col-5 d-flex align-items-end justify-content-end product-img">
<img class="" src="img/OM Chicharon.png" alt="No image">
<div class="variants d-flex flex-column">
<button class="btn active">80g</button>
<button class="btn">40g</button>
</div>
</div>
<div class="col-7 d-flex flex-column justify-content-between product-details">
<div class="up d-flex flex-column align-items-end">
<img id="close-pop-up" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="">
<div class="product-name d-flex flex-column align-items-end">
<h4>oyster mushroom</h5>
<h1>Chicharon</h1>
</div>
<h3 class="price"><span>PHP</span>119.00</h3>
</div>
<div class="down d-flex flex-column align-items-end">
<p class="text-right prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor condimentum nunc vel euismod. Nam eget risus tortor. Proin a quam at enim tincidunt blandit ac eget justo. </p>
<button class="btn rounded-pill buy-now">BUY NOW</button>
</div>
</div>
</div>
</div>
it seems to be working just make sure that your image path is correct,that is image src is actually referring to an image on your machine.

I think you should try in this way, may be it will work
$(document).ready(function(){
$("#close-pop-up").click(function(){
$('#prod-pop-up').css("display", "none");;
});
});
use css("display", "block"); for showing content and css("display", "none"); for hiding the content..

Inside the "click" function, you should choose the right element to hide.
I think the best decision would be the root-div with id "prod-pop-up".
So maybe try:
$(document).ready(function(){
$("#close-pop-up").click(function(){
$('#prod-pop-up').hide();
});
});

I have solved my problem. I have removed the d-flex class. I just put the whole div inside a section so that I can still keep the d-flex class because it ruins the layout without it.

Web Page with div class= parallax_background parallax-window is not loading in django/ pycharm

I am configuring a webpage using django and pycharm. I have placed all the static files and made the changes in settings.py file. In html i have added load static block at the beginning and added static block to all urls. Now when I run the server, all the static content is loading properly except two blocks (testimonial and footer) having div class= parallax_background parallax-window. Below is the code for html
Index.html
{% load static %}
<! DOCTYPE html>
<html lang="en">
<head>
<title>Travello</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Travello template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
<link href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.theme.default.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/animate.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/main_styles.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/responsive.css' %}">
</head>
<body>
<div class="super_container">
<!-- Header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_content d-flex flex-row align-items-center justify-content-start">
<div class="header_content_inner d-flex flex-row align-items-end justify-content-start">
<div class="logo">Travello</div>
<nav class="main_nav">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
<div class="header_phone ml-auto">Call us: 00-56 445 678 33</div>
<!-- Hamburger -->
<div class="hamburger ml-auto">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_social d-flex flex-row align-items-center justify-content-start">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-behance" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
</ul>
</div>
</header>
<!-- Menu -->
<div class="menu">
<div class="menu_header d-flex flex-row align-items-center justify-content-start">
<div class="menu_logo">Travello</div>
<div class="menu_close_container ml-auto"><div class="menu_close"><div></div><div></div></div></div>
</div>
<div class="menu_content">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="menu_social">
<div class="menu_phone ml-auto">Call us: 00-56 445 678 33</div>
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-behance" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
</ul>
</div>
</div>
<!-- Home -->
<div class="home">
<!-- Home Slider -->
<div class="home_slider_container">
<div class="owl-carousel owl-theme home_slider">
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home_page_nav">
<ul class="d-flex flex-column align-items-end justify-content-end">
<li>Offers<span>01</span></li>
<li>Testimonials<span>02</span></li>
<li>Latest<span>03</span></li>
</ul>
</div>
</div>
</div>
<!-- Search -->
<div class="home_search">
<div class="container">
<div class="row">
<div class="col">
<div class="home_search_container">
<div class="home_search_title">Search for your trip</div>
<div class="home_search_content">
<form action="#" class="home_search_form" id="home_search_form">
<div class="d-flex flex-lg-row flex-column align-items-start justify-content-lg-between justify-content-start">
<input type="text" class="search_input search_input_1" placeholder="City" required="required">
<input type="text" class="search_input search_input_2" placeholder="Departure" required="required">
<input type="text" class="search_input search_input_3" placeholder="Arrival" required="required">
<input type="text" class="search_input search_input_4" placeholder="Budget" required="required">
<button class="home_search_button">search</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Intro -->
<div class="intro">
<div class="intro_background" style="background-image:url({% static 'images/intro.png' %})"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="intro_container">
<div class="row">
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="{% static 'images/beach.svg' %}" alt=""></div>
<div class="intro_content">
<div class="intro_title">Top Destinations</div>
<div class="intro_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
</div>
</div>
</div>
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="{% static 'images/wallet.svg' %}" alt=""></div>
<div class="intro_content">
<div class="intro_title">The Best Prices</div>
<div class="intro_subtitle"><p>Sollicitudin mauris lobortis in.</p></div>
</div>
</div>
</div>
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="{% static 'images/suitcase.svg' %}" alt=""></div>
<div class="intro_content">
<div class="intro_title">Amazing Services</div>
<div class="intro_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Destinations -->
<div class="destinations" id="destinations">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="section_subtitle">simply amazing places</div>
<div class="section_title"><h2>Popular Destinations</h2></div>
</div>
</div>
<div class="row destinations_row">
<div class="col">
<div class="destinations_container item_grid">
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_1.jpg' %}" alt="">
<div class="spec_offer text-center">Special Offer</div>
</div>
<div class="destination_content">
<div class="destination_title">Bali</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_2.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Indonesia</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_3.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">San Francisco</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_4.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Paris</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_5.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Phi Phi Island</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_6.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Mykonos</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="testimonials" id="testimonials">
<div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="{% static 'images/testimonials.jpg' %}" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col text-center">
<div class="section_subtitle">simply amazing places</div>
<div class="section_title"><h2>Testimonials</h2></div>
</div>
</div>
<div class="row testimonials_row">
<div class="col">
<!-- Testimonials Slider -->
<div class="testimonials_slider_container">
<div class="owl-carousel owl-theme testimonials_slider">
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="test_nav">
<ul class="d-flex flex-column align-items-end justify-content-end">
<li>City Breaks Clients<span>01</span></li>
<li>Cruises Clients<span>02</span></li>
<li>All Inclusive Clients<span>03</span></li>
</ul>
</div>
</div>
<!-- News -->
<div class="news" id="news">
<div class="container">
<div class="row">
<div class="col-xl-8">
<div class="news_container">
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="{% static 'images/news_1.jpg' %}" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>02</div>
<div>june</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Pellentesque sit amet elementum ccumsan sit amet mattis eget, tristique at leo. Vivamus massa.Tempor massa et laoreet.</p>
</div>
</div>
</div>
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="{% static 'images/news_2.jpg' %}" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>01</div>
<div>june</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Tempor massa et laoreet malesuada. Pellentesque sit amet elementum ccumsan sit amet mattis eget, tristique at leo.</p>
</div>
</div>
</div>
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="{% static 'images/news_3.jpg' %}" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>29</div>
<div>may</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Vivamus massa.Tempor massa et laoreet malesuada. Aliquam nulla nisl, accumsan sit amet mattis.</p>
</div>
</div>
</div>
</div>
</div>
<!-- News Sidebar -->
<div class="col-xl-4">
<div class="travello">
<div class="background_image" style="background-image:url('{% static 'images/travello.jpg' %}')"></div>
<div class="travello_content">
<div class="travello_content_inner">
<div></div>
<div></div>
</div>
</div>
<div class="travello_container">
<a href="#">
<div class="d-flex flex-column align-items-center justify-content-end">
<span class="travello_title">Get a 20% Discount</span>
<span class="travello_subtitle">Buy Your Vacation Online Now</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="parallax_background parallax-window" data-parallax="scroll"
data-image-src="{% static 'images/footer_1.jpg' %}" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="newsletter">
<div class="newsletter_title_container text-center">
<div class="newsletter_title">Subscribe to our newsletter to get the latest trends &
news</div>
<div class="newsletter_subtitle">Join our database NOW!</div>
</div>
<div class="newsletter_form_container">
<form action="#"
class="newsletter_form d-flex flex-md-row flex-column align-items-start justify-content-between"
id="newsletter_form">
<div
class="d-flex flex-md-row flex-column align-items-start justify-content-between">
<div><input type="text" class="newsletter_input newsletter_input_name"
id="newsletter_input_name" placeholder="Name" required="required">
<div class="input_border"></div>
</div>
<div><input type="email" class="newsletter_input newsletter_input_email"
id="newsletter_input_email" placeholder="Your e-mail"
required="required">
<div class="input_border"></div>
</div>
</div>
<div><button class="newsletter_button">subscribe</button></div>
</form>
</div>
</div>
</div>
</div>
<div class="row footer_contact_row">
<div class="col-xl-10 offset-xl-1">
<div class="row">
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div
class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="{% static 'images/sign.svg' %}" alt="">
</div>
<div class="footer_contact_title">give us a call</div>
<div class="footer_contact_list">
<ul>
<li>Office Landline: +44 5567 32 664 567</li>
<li>Mobile: +44 5567 89 3322 332</li>
</ul>
</div>
</div>
</div>
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div
class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="{% static 'images/trekking.svg' %}"
alt=""></div>
<div class="footer_contact_title">come & drop by</div>
<div class="footer_contact_list">
<ul style="max-width:190px">
<li>4124 Barnes Street, Sanford, FL 32771</li>
</ul>
</div>
</div>
</div>
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div
class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="{% static 'images/around.svg' %}" alt="">
</div>
<div class="footer_contact_title">send us a message</div>
<div class="footer_contact_list">
<ul>
<li>youremail#gmail.com</li>
<li>Office#yourbusinessname.com</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made
with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com"
target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</div>
</footer>
</div>
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'styles/bootstrap4/popper.js' %}"></script>
<script src="{% static 'styles/bootstrap4/bootstrap.min.js' %}"></script>
<script src="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.js' %}"></script>
<script src="{% static 'plugins/Isotope/isotope.pkgd.min.js' %}"></script>
<script src="{% static 'plugins/scrollTo/jquery.scrollTo.min.js' %}"></script>
<script src="{% static 'plugins/easing/easing.js' %}"></script>
<script src="{% static 'plugins/parallax-js-master/parallax.min.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
</body>
</html>
settings.py-
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT=os.path.join(BASE_DIR,'assets')
Am I missing any changes to be done?

The issue is solved... I guess there was issue while setting up the project. Everything is working fine now.

Browser back button is not perform right

I am using Rails and did a navbar. The navbar folds into a burger after the certain width has been reached. I am able to click on the burger-sign without defining any event listener in JS. I just added this into the head of my application.html.erb
<meta>
<%= javascript_include_tag 'application' %>
<%= yield :js %>
<meta>
After adding, the click worked perfectly, but my home link, root_path was broken. It constantly lead to the #index page, but would display only "2019"on the blank page, not the actual #index page layout. I fixed the links adding the get method ty my link, like this:
<li><%= link_to 'Home', root_path, method: :get %></li>
What still doensn't work, is my browser back button, this still leads to this weird blank page with the 2019 printed on it. Can someone explain what is happening and how do I get to the previous page by clicking on the browser back button? Thanks!
P.S. This is the sourse html
<!DOCTYPE html>
<html>
<head>
<title>Neigbornow</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="RST7jzlY6IftapnMzEI9BkObFqh4B8EaX4cnX7PavwQq7ziZ5PKkVtgnExe8oShZxl56m40/UBgYG0OacVrWbg==" />
<meta>
<script src="/assets/jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1"></script>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/bootstrap/affix.self-b2bd74404ab3c627c5129dcdd3bdc2fc0a9d4bff4e1b6f1bae96412f9a1e9723.js?body=1"></script>
<script src="/assets/bootstrap/alert.self-7c7aa23778284da0e4aa395a0a6d858c7efd891c9312fe71908b28292654ac0c.js?body=1"></script>
<script src="/assets/bootstrap/button.self-b7a8ce9f47662b97ab74ef3dd416e93d3a4f644b252307a28231976a0149feef.js?body=1"></script>
<script src="/assets/bootstrap/carousel.self-c2c0ad2347d3fdd8447abd9d5792efed40ad5afadc5e0de3001e34904a6f68ce.js?body=1"></script>
<script src="/assets/bootstrap/collapse.self-4db094cc14a1aafa93e51e6f298115323037bb9e24c060dd0de52f27446f6227.js?body=1"></script>
<script src="/assets/bootstrap/dropdown.self-7efa4aa654357ae664a98ec52151c25cd4927eacd1fabe038d068d9344b62cbd.js?body=1"></script>
<script src="/assets/bootstrap/modal.self-4ca048907279f4bb9187ba2541ae5d03296917d5c42e8fef0b58ec31c8902f0f.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy.self-e62629e47ba5fe8b7faaa745f2fef2ccdb1bfd56ffb4f95615684ef40c74bcc4.js?body=1"></script>
<script src="/assets/bootstrap/tab.self-7fbfa844201ceeb4b896e4d185a33df19a284fe461281b7c0f78dbea2ef6da5a.js?body=1"></script>
<script src="/assets/bootstrap/transition.self-3c74f1999fcbf39cfb240b67c9a9e900863859f82f53fb27e5a388fe5e1a1c5c.js?body=1"></script>
<script src="/assets/bootstrap/tooltip.self-82858d5843f55bfed321ea59fc5b180f3d2a8afc498ebc4d665561110b807875.js?body=1"></script>
<script src="/assets/bootstrap/popover.self-a1e6d4555fb912f0405099135eaddbe8273ba8f08323477a471d34419d57b446.js?body=1"></script>
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1"></script>
<script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1"></script>
<script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1"></script>
<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/profile.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/reviews.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/user_steps.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/application.self-813dac1f9eb54ab17313987648014af35d74ebeb15c2265509c52491183d3dcc.js?body=1"></script>
<meta>
<link rel="stylesheet" media="all" href="/assets/style.self-67cdb30c3f83239515cab5c4f35c9f7533c426bd77b8d75c40e8ff613eb658ec.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-fe639f1da8d2570340060e10dc6bf2430bb27ff5e40357dce724cbc8efb24584.css?body=1" data-turbolinks-track="reload" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand pull-left" href="#">
<img src="/assets/logo_transparent-ad9441c50046e461177bad078050d5345754d0413d7ef8a7f549aa5bf35e466e.png" width="147" height="70" class="d-inline-block align-left mr-2">
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li><a data-method="get" href="/">Home</a></li>
<li><a>About</a></li>
<li><a>Search</a></li>
<li><a>Contact</a>
<li>
<div class="log-in-btn"><button class="btn" type="submit">Log in</button></div>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
</div>
<head>
<title>Neignbornow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="empty-space"> </div>
<div class="site-blocks-cover overlay" style="background-image: url(https://images.unsplash.com/photo-1464082354059-27db6ce50048?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80);" data-aos="fade" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row align-items-center justify-content-end text-center">
<div class="row justify-content-center mb-4">
<div class="col-md-8 text-left">
<div class="site-intro">
<h1>Home is about personal connections, not just neighbors.</h1>
<p>Recconect with your neighbors, by sharing things and experiences. Now.</p>
<button class="btn register" type="submit">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header -->
<!-- About section -->
<div class="site-section bg-light">
<div class="container">
<div class="col-12">
<h2>About Neighborheart</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
</p>
</div>
</div>
</div>
<!-- About section -->
<!-- Testimonials -->
<div class="site-section bg-white">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Testimonials</h2>
</div>
</div>
<div class="slide-one-item home-slider owl-carousel">
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_3.jpg" alt="Image" class="img-fluid mb-3">
<p>John Smith</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_2.jpg" alt="Image" class="img-fluid mb-3">
<p>Christine Aguilar</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_4.jpg" alt="Image" class="img-fluid mb-3">
<p>Robert Spears</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_5.jpg" alt="Image" class="img-fluid mb-3">
<p>Bruce Rogers</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<!-- Search section and show map -->
<div class="site-section bg-light">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="h5 mb-4 text-black">Search for items in your neighborhood</h2>
<!-- Serach bar -->
<div class="form-search-wrap mb-3" data-aos="fade-up" data-aos-delay="200">
<form method="post">
<div class="row align-items-center">
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-4">
<input type="text" class="form-control rounded" placeholder="What are you looking for?">
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="wrap-icon">
<span class="icon icon-room"></span>
<input type="text" class="form-control rounded" placeholder="Location">
</div>
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="select-wrap">
<span class="icon"><span class="icon-keyboard_arrow_down"></span></span>
<select class="form-control rounded" name="" id="">
<option value="">All Categories</option>
<option value="">Real Estate</option>
<option value="">Books & Magazines</option>
<option value="">Furniture</option>
<option value="">Electronics</option>
<option value="">Cars & Vehicles</option>
<option value="">Others</option>
</select>
</div>
</div>
<div class="col-lg-12 col-xl-2 ml-auto text-right">
<input type="submit" class="btn btn-primary btn-block rounded" value="Search">
</div>
</div>
</form>
</div>
<!-- Search bar -->
<!-- Map -->
<!-- Map -->
</div>
</div>
</div>
</div>
<!-- Search section Search section and show map -->
<!-- Cathegories -->
<div class="site-section" data-aos="fade">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Popular Categories</h2>
<p class="color-black-opacity-5">Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
<div class="overlap-category mb-5">
<div class="row align-items-stretch no-gutters">
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-car"></span></span>
<span class="caption mb-2 d-block">Services</span>
<span class="number">1,921</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-closet"></span></span>
<span class="caption mb-2 d-block">Events</span>
<span class="number">2,339</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-home"></span></span>
<span class="caption mb-2 d-block">Household</span>
<span class="number">4,398</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-open-book"></span></span>
<span class="caption mb-2 d-block">Books & Magazines</span>
<span class="number">3,298</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-tv"></span></span>
<span class="caption mb-2 d-block">Electronics</span>
<span class="number">2,932</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-pizza"></span></span>
<span class="caption mb-2 d-block">Beverages</span>
<span class="number">183</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Cathegories -->
<div class="newsletter bg-primary py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2>Newsletter</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col-md-6">
<form class="d-flex">
<input type="text" class="form-control" placeholder="Email">
<input type="submit" value="Subscribe" class="btn btn-white">
</form>
</div>
</div>
</div>
</div>
</body>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<h2 class="footer-heading mb-4">About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident rerum unde possimus molestias dolorem fuga, illo quis fugiat!</p>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Navigations</h2>
<ul class="list-unstyled">
<li>About Us</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Follow Us</h2>
<span class="icon-facebook"></span>
<span class="icon-twitter"></span>
<span class="icon-instagram"></span>
<span class="icon-linkedin"></span>
</div>
</div>
</div>
<div class="col-md-3">
<form action="#" method="post">
<div class="input-group mb-3">
<input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Search products..." aria-label="Enter Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary text-white" type="button" id="button-addon2">Search</button>
</div>
</div>
</form>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>
document.write(new Date().getFullYear());
</script> All rights reserved | This template is made with <i class="icon-heart" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>

npm run serve hangs forever vue

I'm trying to port HTML template to .vue files. I know there's known problem with deeply nested DOM like in this question, but my vue.config.js already looks like that:
module.exports = {
chainWebpack: (config) => {
const vueRule = config.module.rule('vue');
vueRule.uses.clear();
const vueLoader = vueRule.use('vue-loader').loader('vue-loader');
vueLoader.options({
prettify: false,
});
},
};
npm run serve hangs on 22% forever and it looks like that:
> vue-cli-service serve
INFO Starting development server...
22% building 106/110 modules 4 active ...bout.vue?vue&type=template&id=039c5b43&
While NODE_ENV=production npm run serve runs just fine.
Here's my whole About.vue file which hangs on render:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About us</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Destino project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="styles/about_styles.css">
<link rel="stylesheet" type="text/css" href="styles/about_responsive.css">
</head>
<body>
<div class="super_container">
<!-- Header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_container d-flex flex-row align-items-center justify-content-start">
<!-- Logo -->
<div class="logo_container">
<div class="logo">
<div>destino</div>
<div>travel agency</div>
<div class="logo_image"><img src="images/logo.png" alt=""></div>
</div>
</div>
<!-- Main Navigation -->
<nav class="main_nav ml-auto">
<ul class="main_nav_list">
<li class="main_nav_item">Home</li>
<li class="main_nav_item active">About us</li>
<li class="main_nav_item">Offers</li>
<li class="main_nav_item">News</li>
<li class="main_nav_item">Contact</li>
</ul>
</nav>
<!-- Search -->
<div class="search">
<form action="#" class="search_form">
<input type="search" name="search_input" class="search_input ctrl_class" required="required" placeholder="Keyword">
<button type="submit" class="search_button ml-auto ctrl_class"><img src="images/search.png" alt=""></button>
</form>
</div>
<!-- Hamburger -->
<div class="hamburger ml-auto"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
</header>
<!-- Menu -->
<div class="menu_container menu_mm">
<!-- Menu Close Button -->
<div class="menu_close_container">
<div class="menu_close"></div>
</div>
<!-- Menu Items -->
<div class="menu_inner menu_mm">
<div class="menu menu_mm">
<div class="menu_search_form_container">
<form action="#" id="menu_search_form">
<input type="search" class="menu_search_input menu_mm">
<button id="menu_search_submit" class="menu_search_submit" type="submit"><img src="images/search_2.png" alt=""></button>
</form>
</div>
<ul class="menu_list menu_mm">
<li class="menu_item menu_mm">Home</li>
<li class="menu_item menu_mm">About us</li>
<li class="menu_item menu_mm">Offers</li>
<li class="menu_item menu_mm">News</li>
<li class="menu_item menu_mm">Contact</li>
</ul>
<!-- Menu Social -->
<div class="menu_social_container menu_mm">
<ul class="menu_social menu_mm">
<li class="menu_social_item menu_mm"><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-linkedin" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-twitter" aria-hidden="true"></i></li>
</ul>
</div>
<div class="menu_copyright menu_mm">Colorlib All rights reserved</div>
</div>
</div>
</div>
<!-- Home -->
<div class="home">
<!-- Image by https://unsplash.com/#peecho -->
<div class="home_background parallax-window" data-parallax="scroll" data-image-src="images/about_background.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_content_inner">
<div class="home_title">About us</div>
<div class="home_breadcrumbs">
<ul class="home_breadcrumbs_list">
<li class="home_breadcrumb">Home</li>
<li class="home_breadcrumb">About us</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Find Form -->
<div class="find">
<!-- Image by https://unsplash.com/#garciasaldana_ -->
<div class="find_background_container prlx_parent">
<div class="find_background prlx" style="background-image:url(images/find.jpg)"></div>
</div>
<!-- <div class="find_background parallax-window" data-parallax="scroll" data-image-src="images/find.jpg" data-speed="0.8"></div> -->
<div class="container">
<div class="row">
<div class="col-12">
<div class="find_title text-center">Find the Adventure of a lifetime</div>
</div>
<div class="col-12">
<div class="find_form_container">
<form action="#" id="find_form" class="find_form d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-between justify-content-start flex-wrap">
<div class="find_item">
<div>Destination:</div>
<input type="text" class="destination find_input" required="required" placeholder="Keyword here">
</div>
<div class="find_item">
<div>Adventure type:</div>
<select name="adventure" id="adventure" class="dropdown_item_select find_input">
<option>Categories</option>
<option>Categories</option>
<option>Categories</option>
</select>
</div>
<div class="find_item">
<div>Min price</div>
<select name="min_price" id="min_price" class="dropdown_item_select find_input">
<option> </option>
<option>Price</option>
<option>Price</option>
</select>
</div>
<div class="find_item">
<div>Max price</div>
<select name="max_price" id="max_price" class="dropdown_item_select find_input">
<option> </option>
<option>Price</option>
<option>Price</option>
</select>
</div>
<button class="button find_button">Find</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- About -->
<div class="about">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>We are an award winning Agency</h2>
<div>take a look at our story</div>
</div>
</div>
</div>
<div class="row about_row">
<div class="col-lg-6 about_col order-lg-1 order-2">
<div class="about_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis. Quisque vel est id justo faucibus dapibus id a nibh. Aenean suscipit consequat lacus, sit amet mollis nulla. Morbi sagittis orci id lacus convallis tempus eget sit amet metus. Sed finibus, magna at euismod aliquet, enim justo vulputate lorem, sit amet elementum dolor eros sollicitudin dui. Sed ac magna mauris. Nullam lectus odio, viverra vel mi id, interdum imperdiet nulla. </p>
<div class="button about_button">Read More</div>
</div>
</div>
<div class="col-lg-6 about_col order-lg-2 order-1">
<div class="about_image">
<img src="images/about.jpg" alt="https://unsplash.com/#sanfrancisco">
</div>
</div>
</div>
</div>
</div>
<!-- Milestones -->
<div class="milestones">
<div class="milestones_background parallax-window" data-parallax="scroll" data-image-src="images/fact_background.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>Fun facts about our Agency</h2>
<div>take a look</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="milestones_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis. Quisque vel est id justo faucibus dapibus id a nibh</p>
</div>
</div>
</div>
<div class="row milestones_container">
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_1.svg" alt=""></div>
<div class="milestone_counter" data-end-value="17">0</div>
<div class="milestone_text">Mountains Climbed</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_2.svg" alt=""></div>
<div class="milestone_counter" data-end-value="213">0</div>
<div class="milestone_text">Islands Visited</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_3.svg" alt=""></div>
<div class="milestone_counter" data-end-value="11923">0</div>
<div class="milestone_text">Photos Taken</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_4.svg" alt=""></div>
<div class="milestone_counter" data-end-value="15">0</div>
<div class="milestone_text">Cruises Organized</div>
</div>
</div>
</div>
</div>
</div>
<!-- Services -->
<div class="services">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>Popular services that we offer</h2>
<div>take a look at these offers</div>
</div>
</div>
</div>
<div class="row icon_box_container">
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_1.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Weekend trips</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_2.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Fun leisure trips</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_3.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Plane tickets</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="newsletter">
<!-- Image by https://unsplash.com/#garciasaldana_ -->
<div class="newsletter_background" style="background-image:url(images/newsletter.jpg)"></div>
<div class="container">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<div class="newsletter_content">
<div class="newsletter_title text-center">Subscribe to our Newsletter</div>
<div class="newsletter_form_container">
<form action="#" id="newsletter_form" class="newsletter_form">
<div class="d-flex flex-md-row flex-column align-content-center justify-content-between">
<input type="email" id="newsletter_input" class="newsletter_input" placeholder="Your E-mail Address">
<button type="submit" id="newsletter_button" class="newsletter_button">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="footer_about">
<!-- Logo -->
<div class="logo_container">
<div class="logo">
<div>destino</div>
<div>travel agency</div>
<div class="logo_image"><img src="images/logo.png" alt=""></div>
</div>
</div>
<div class="footer_about_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar sed mauris eget tincidunt. Sed lectus nulla, tempor vel eleifend quis, tempus rut rum metus. Pellentesque ultricies enim eu quam fermentum hendrerit.</div>
<div class="copyright"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></div>
</div>
</div>
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="footer_latest">
<div class="footer_title">Latest News</div>
<div class="footer_latest_content">
<!-- Footer Latest Post -->
<div class="footer_latest_item">
<div class="footer_latest_image"><img src="images/latest_1.jpg" alt="https://unsplash.com/#peecho"></div>
<div class="footer_latest_item_content">
<div class="footer_latest_item_title">Brazil Summer</div>
<div class="footer_latest_item_date">Jan 09, 2018</div>
</div>
</div>
<!-- Footer Latest Post -->
<div class="footer_latest_item">
<div class="footer_latest_image"><img src="images/latest_2.jpg" alt="https://unsplash.com/#sanfrancisco"></div>
<div class="footer_latest_item_content">
<div class="footer_latest_item_title">A perfect vacation</div>
<div class="footer_latest_item_date">Jan 09, 2018</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="tags footer_tags">
<div class="footer_title">Tags</div>
<ul class="tags_content d-flex flex-row flex-wrap align-items-start justify-content-start">
<li class="tag">travel</li>
<li class="tag">summer</li>
<li class="tag">cruise</li>
<li class="tag">beach</li>
<li class="tag">offer</li>
<li class="tag">vacation</li>
<li class="tag">trip</li>
<li class="tag">city break</li>
<li class="tag">adventure</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="styles/bootstrap4/popper.js"></script>
<script src="styles/bootstrap4/bootstrap.min.js"></script>
<script src="plugins/greensock/TweenMax.min.js"></script>
<script src="plugins/greensock/TimelineMax.min.js"></script>
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="plugins/greensock/animation.gsap.min.js"></script>
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="plugins/parallax-js-master/parallax.min.js"></script>
<script src="js/about_custom.js"></script>
</body>
</html>
</template>
<script>
export default {
name: 'About',
}
</script>
Have you any idea why it runs fine in production mode while in development it can't? I've googled it very intensive, but I only know the issue with prettify which seems to be prevented in my case.

Smooth Scroll not working properly on mobile layout

I'm doing a site and in browser layout, smooth-scroll works perfectly but in mobile layout when I click in a link it doesn't leave me in the right place. Always much lower. Why?
I have reviewed the code and documentation of Smooth Scroll but I can not find anything wrong.
Here is my code:
https://codepen.io/ZeR0ByTe/pen/wrbMRZ
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- ESTILOS CSS -->
<link href="css/estilo.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<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/blueimp-gallery.min.css">
<!-- scroll -->
<script src="js/smooth-scroll.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
</script>
</link>
</link>
</link>
</meta>
</meta>
</head>
<body>
<header class="d-none d-md-block" >
<div id="sliderFotos" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#sliderFotos" data-slide-to="0" class="active"></li>
<li data-target="#sliderFotos" data-slide-to="1"></li>
<li data-target="#sliderFotos" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url(img/bg-4.jpg">
<div class="carousel-caption d-none d-md-block">
<div class="row">
<div class="col-4 d-flex">
<img class="img-fluid align-self-center logo wow bounceIn" data-wow-duration="1s" src="img/logoSB.png" width="300" height="300" alt="">
</div>
<div class="col-8">
<div class="jumbotron wow bounceIn" data-wow-duration="1s">
<h1 class="display-2 bg-warning">Bienvenidos!</h1>
<p class="lead">Aca iría un primer mensaje de presentación a la página, noticia u otra cosa.</p>
<hr class="m-y-md">
<p>Y se puede complementar con otro texto acá, pero más corto.</p>
<p class="lead">
<a class="btn btn-warning btn-lg" href="#servicio" role="button"><i class="fa fa-arrow-down fa-lg mr-2"></i>Más info
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(img/bg-7.jpg">
<div class="carousel-caption d-none d-md-block">
<h3>ALGÚN MENSAJE 2</h3>
<p>Descripción 2do mensaje.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(img/bg-5.jpg">
<div class="carousel-caption d-none d-md-block">
<h3>ALGÚN MENSAJE 3</h3>
<p>Descripción 3er mensaje.</p>
</div>
</div>
</div>
<!-- CONTROLES SLIDER -->
<a data-scroll-ignore class="carousel-control-prev" href="#sliderFotos" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a data-scroll-ignore class="carousel-control-next" href="#sliderFotos" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-xl navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">
SBGuardavidas
</img>
</a>
<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto text-center">
<a class="nav-item nav-link active" data-scroll href="#">
Inicio
</a>
<a class="nav-item nav-link" data-scroll href="#nosotros">
Nosotros
</a>
<a class="nav-item nav-link" href="#">
Publicidad
</a>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="" id="navbarDropdownMenuLink">
Eventos
</a>
<div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" data-scroll href="#conciencia">
PROYECTO +CONCIENCIA
</a>
<a class="dropdown-item" data-scroll href="#">
Antorchada
</a>
<a class="dropdown-item" data-scroll href="#">
Competencias
</a>
</div>
</li>
<a class="nav-item nav-link" data-scroll href="#galeria">
Galería
</a>
<a class="nav-item nav-link" data-scroll href="#contacto">
Contacto
</a>
</ul>
<div class="d-flex flex-row justify-content-center">
<a class="mr-2 mx-2" href="#">
<i class="fa fa-2x fa-facebook-official" aria-hidden="true"></i>
</a>
<a class="" href="#">
<i class="fa fa-2x fa-instagram" aria-hidden="true"></i>
</a>
</div>
</div>
</nav>
<!-- FIN NAVBAR -->
<!-- NOTICIAS -->
<section class=" d-flex justify-content-center align-content-center flex-wrap iconos" >
<div class="container-fluid" >
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="" id="servicio" >
SIEMPRE A TU SERVICIO
</h2>
<hr>
</div>
</div>
</div>
<div class="container my-5">
<div class="row ">
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.2s">
<div class="">
<i class="fa fa-5x fa-binoculars text-danger sr-icons">
</i>
<h3>
Seguridad
</h3>
<p class="text-muted">
A tu cuidado en la playa, continuamente vigilando.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.4s">
<div class="service-box">
<i class="fa fa-5x fa-handshake-o text-danger fa-fw">
</i>
<h3>
Confianza
</h3>
<p class="text-muted">
Trabajamos en equipo para un mejor resultado.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.6s">
<div class="service-box">
<i class="fa fa-5x fa-globe text-danger sr-icons">
</i>
<h3>
Medio Ambiente
</h3>
<p class="text-muted">
Protegemos, concientizamos y educamos.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.8s">
<div class="service-box">
<i class="fa fa-5x fa-heart text-danger sr-icons">
</i>
<h3>
Pasión
</h3>
<p class="text-muted">
Amamos lo que hacemos.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- FIN NOTICIAS -->
<!-- NOSOTROS -->
<div class="container-fluid nosotros d-flex justify-content-center align-items-center" >
<div class="row">
<div class="col-sm-12">
<h2 class="text-center" id="nosotros">
NOSOTROS
</h2>
<hr>
<p class="lead text-center">
Conocenos un poco más...
</p>
</div>
<div class="col-sm-12 col-md-6 p-4">
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
</div>
<div class="col-sm-12 col-md-6 p-4">
<img alt="" class="img-fluid" src="img/equipo.jpg">
</img>
</div>
</div>
</div>
<!-- FIN NOSOTROS -->
<!-- +CONCIENCIA -->
<div class="container-fluid" >
<div class="row ">
<div class="col-sm-12 col-md-6 d-flex justify-content-center align-items-center conciencia-izquierda ">
<img alt="" class="img-fluid" width="400" height="400" src="img/logoSB.png">
</img>
</div>
<div class="col-sm-12 col-md-6 d-flex justify-content-center align-items-center flex-wrap conciencia-derecha">
<h2 class="" id="conciencia">
PROYECTO +CONCIENCIA
</h2>
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, temporibus, animi. Nesciunt fugit unde voluptates cum, aut, quia, doloribus laborum inventore quam nemo repudiandae veniam? Sapiente tempora iusto suscipit quae at eligendi nobis odit voluptatibus quos perspiciatis, assumenda deserunt modi enim minima numquam facilis quis dignissimos, molestias veniam culpa amet!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem et cumque, aliquid. Magnam sapiente aliquam repellat dolorum harum,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas dignissimos aut dolorum aliquam minus, rerum.
</p>
</div>
</div>
</div>
</div>
<!-- FIN CONCIENCIA -->
<!-- GALERIA -->
<div class="container-fluid galeria d-flex align-items-center">
<div class="row ">
<div class="col-md-12">
<h2 class="text-center text-white" id="galeria">
GALERÍA
</h2>
<hr>
<p class="lead text-center text-white">
Un poco de nuestros momentos...
</p>
</div>
<!-- The container for the list of example images -->
<div id="links" class="text-center p-2">
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
</div>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
</div>
</div>
</div>
</div>
<!-- FIN GALERIA -->
<!-- SPONSORS -->
<div class="container-fluid bg-warning sponsors d-none d-lg-block">
<div class="row">
<div class="col-12">
<h2 class="text-center text-white">MARCAS QUE NOS APOYAN</h2>
<hr>
<p class="lead text-center text-white">
Cada temporada confían en nosotros...
</p>
<div class="col-12 owl-carousel owl-theme">
<div class="item my-3">
<img class="" src="img/partner-1.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-2.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-3.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-1.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="img-fluid center-block" src="img/partner-2.png" alt="Effacy partner">
</div>
</div>
</div>
</div>
</div>
<!-- FIN SPONSORS -->
<!-- CONTACTO -->
<div class="container" >
<div class="row d-flex justify-content-center align-content-center contacto">
<div class="col-12">
<h2 class="text-center" id="contacto">CONTACTO</h2>
<hr>
<p class="lead text-center mb-5">
Comunicate con nosotros ante cualquier duda.
</p>
</div>
<div class="row justify-content-center">
<!-- MENSAJE DE ENVIO Y ERROR PHP -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Mensaje enviado correctamente.</strong> En poco tiempo te respodemos. ¡Muchas gracias!
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Error, hubo un problema.</strong> Intentalo otra vez. ¡Muchas gracias!
</div>
<!-- FIN MENSAJE DE ENVIO Y ERROR PHP -->
</div>
<!-- FORM LADO IZQUIERDO -->
<div class="col-md-12 col-lg-4">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Nombre">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="E-mail">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-mobile fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Celular">
</div>
</div>
<!-- FORM LADO DERECHO -->
<div class="col-md-12 col-lg-8">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-commenting fa-fw"></i></span>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="6" placeholder="Escriba su mensaje..."></textarea>
</div>
</div>
<button type="submit" class="btn btn-success align-s"><i class="fa fa-paper-plane fa-lg mr-2"></i>Enviar</button>
<button type="reset" class="btn btn-danger align-s"><i class="fa fa-trash-o fa-lg mr-2"></i>Borrar</button>
<!-- BOTON MOSTRAR MAPA DE SB -->
<button id="mapa" type="button" class="btn btn-lg btn-block btn-warning mt-5" data-toggle="modal" data-target="#mostrarMapa">Mapa de San Bernardo</button>
<!-- MODAL MAPA DE SB -->
<div class="modal fade" id="mostrarMapa" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabelLarge">Mapa de San Bernardo - Horarios ENERO / FEBRERO</h4>
</div>
<div class="modal-body">
<img class="img-fluid" src="img/mapa2.png">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- FIN CONTACTO -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/blueimp-gallery.js"></script>
<script src="js/jquery.blueimp-gallery.js"></script>
<script>$(document).ready(function(){
// Animacion Scroll (animate.css)
new WOW().init();
// SmoothScroll
var scroll = new SmoothScroll('a[href*="#"]', {
// Speed & Easing
speed: 2000, // Integer. How fast to complete the scroll in milliseconds
offset: 0, // Integer or Function returning an integer. How far to offset the scrolling anchor location in pixels
easing: 'easeInOutQuart', // Easing pattern to use
});
// COMIENZO CARROUSEL
$(".owl-carousel").owlCarousel({
items:8,
loop: true,
margin: 30,
autoplayTimeout:1500,
center: true,
autoplay: true,
autoplayHoverPause:true,
autowidth: false,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:8,
nav:true,
}
}
});
$('.navbar-nav>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
$('.navbar-nav>.dropdown>.dropdown-menu>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
});
// comienzo isotope
// fin isotope
</script>
</body>
</html>
-(Sorry for my english)
-(Tablet layout is not ready yet)
Thanks!

Finally a friend could solve the problem, so I share the solution in case someone else serves him.
I have removed the JS library SmoothScroll and also the code to start it.
// SmoothScroll
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 2000,
offset: 0,
easing: 'easeInOutQuart', // Easing pattern to use
});
And I replace for this:
$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
// Remove links that don't actually link to anything
.click(function(event) {
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
var scrollTop = target.offset().top - $('.sticky-top').height();
$('html, body').animate({
scrollTop: scrollTop
}, 1000)
}
}
});
The code above is adapted to what I needed, but it was based on this:
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Thanks and sorry again for my english.

I manage to solve this by using a different offset value when the window width is on mobile
const options = {
speed: 500,
speedAsDuration: true,
offset: window.innerWidth < 768 ? 400 : 90
}
new SmoothScroll('a[href*="#"]', options);
The problem seems to be that in mobile the library requires a higher offset value, maybe because the elements are not exactly the same dimensions than on desktop.
Hope this could help you or someone.
Greetings