1

Does anyone know what part of this code is causing the page layout to break? The layout goes wrong just under Revolution slider and around the parallax section.

It did work fine but I tried to edit something (without backing up) and when I put it back how I thought it originally was the layout is broken.

<div class="full-screen-slider">{{revslider alias="Home Slider"}}</div>
<div class="container">
<div class="single-images" style="padding-top: 15px;">
<div class="row">
<div class="col-sm-4" style="padding-bottom: 15px;"><a class="image-link" href="javascript:;"> <img alt="" src="{{media url="wysiwyg/porto/homepage/slider/02/image1.png"}}" /> </a><a class="yellow-title" href="javascript:;"><span class="blockbtn">View the Full Range</span></a></div>
<div class="col-sm-4" style="padding-bottom: 15px;"><a class="image-link" href="javascript:;"> <img alt="" src="{{media url="wysiwyg/porto/homepage/slider/02/image2.png"}}" /> </a><a class="blue-title" href="javascript:;"><span class="blockbtn">View the Full Range</span></a></div>
<div class="col-sm-4" style="padding-bottom: 15px;"><a class="image-link" href="javascript:;"> <img alt="" src="{{media url="wysiwyg/porto/homepage/slider/02/image3.png"}}" /> </a><a class="red-title" href="javascript:;"><span class="blockbtn">Visit the Website</span></a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="featured_product" class="owl-top-narrow hide-addtolinks">
<h2 class="featured-title">FEATURED PRODUCTS</h2>
{{block type="filterproducts/featured_home_list" name="new_list"  product_count="10" template="filterproducts/list.phtml"}}</div>
<script type="text/javascript">// <![CDATA[
jQuery(function($){
            $("#featured_product .filter-products  .owl-carousel").owlCarousel({lazyLoad: true,    itemsCustom: [ [0, 1], [320, 1], [480, 2], [768, 3], [992, 4], [1200, 4] ],    responsiveRefreshRate: 50,    slideSpeed: 200,    paginationSpeed: 500,    scrollPerPage: false,    stopOnHover: true,    rewindNav: true,    rewindSpeed: 600,    pagination: false,    navigation: true,    autoPlay: true,    navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]});
        });
// ]]></script>
</div>
</div>

<script type="text/javascript">// <![CDATA[
jQuery(function($){
    $('#parallax_01').parallax("70%", 0.1);
});
// ]]></script>
<div>
 <div id="parallax_01" class="container" style="background: url({{media  url=;">
 <div class="overlay overlay-color" style="background-color: #000000;  opacity: 0.10; filter: alpha(opacity=10); top: 0;">&nbsp;</div>
 <div class="parallax-slider" style="position: relative; z-index: 3;">
 <div id="parallax-slider-demo-5" class="owl-carousel owl-theme">
 <div class="item">
 <h2>Auto Tuning</h2>
 <p>Auto parts</p>
 <a href="javascript:;">Shop Now &gt;</a></div>
 <div class="item">
 <h2>Auto Tuning</h2>
<p>UK dealer backup &amp; warranty</p>
<a href="javascript:;">Shop Now &gt;</a></div>
<div class="item">
<h2>Auto Tuning</h2>
<p>All parts 100% genuine </p>
<a href="javascript:;">Shop Now &gt;</a></div>
</div>
<script type="text/javascript">// <![CDATA[
jQuery(function($){
                $("#parallax-slider-demo-5").owlCarousel({navigation : false, pagination: false, slideSpeed : 300,paginationSpeed : 400,    stopOnHover: true,autoPlay: true,singleItem:true});
            });
// ]]></script>
</div>
</div>
</div>
2

YOu miss close tag in this line

 <div id="parallax_01" class="container" style="background: url({{media  url=;">

It is typo error or missing?

1

Make sure your HTML is valid. You can check this with the W3C markup validator: https://validator.w3.org/

Also double check if your CSS files are all properly loading. Chrome dev tools will help you with this. Verify that there are no 404s.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.