About This Ticket

Responsive Home & Header

by arkheacol04 / February 15, 2016, 7:03 pm

Why's my header and slider don't work well on my phone? I'm using your current web as a preview.

Staff

Hi,

The 'autoplay' property of the slider in the homepage is false, by default. To change its value to 'true', please open the 'main.js' file and find the following lines of code (should be near line no. 240):

// Header Slider v1
 $('#slider-v1').owlCarousel({
     singleItem : true,
     navigation:true,
     pagination:false,
     navigationText:['','']   
 });

 

Paste the code below in place of the above code:

// Header Slider v1
 $('#slider-v1').owlCarousel({
     singleItem : true,
     navigation:true,
     pagination:false,
     navigationText:['',’’],
     autoPlay: true
 });

This should make the slider slide automatically. Let us know if this worked.

 

Thanks and regards,

0effort Team

Yes, that the one, and also, why am I getting the whole picture of sofa cropped? and I cant see the rest of the image using my phone. How can I display the whole image?

Staff

Hi,

 

Well, the reason the image is getting cropped in mobile is because the image is a landscape image made to fit in the width of a desktop browser.

When the site is viewed in mobile, the viewing area becomes portrait. Hence, the image is getting cropped.

This issue can be avoided by setting a portrait version of the same image for the mobile view, which can be incorporated through CSS media-query. A little HTML will also need to be changed.

For example, in the file 'banner-slider.html', you will find the following lines of code in line no. 113:

<div class="banner-slider owl-carousel" id="slider-v1">
    <div class="slider-item" style="background-image: url('images/banner/banner-2.jpg');">
    
    <img src="images/banner/banner-2.jpg"  class="banner-img" alt="">
    </div>
    <div class="slider-item" style="background-image: url('images/banner/banner-3.jpg');">
    <img src="images/banner/banner-3.jpg"  class="banner-img" alt="">  
    </div>
  </div>

 

In place of the above code, paste the following code: 

<div class="banner-slider owl-carousel" id="slider-v1">
    <div class="slider-item item1" style="background-image: url('images/banner/banner-2.jpg');">
        <img src="images/banner/banner-2.jpg"  class="banner-img" alt="">
    </div>
    <div class="slider-item item2" style="background-image: url('images/banner/banner-3.jpg');">
        <img src="images/banner/banner-3.jpg"  class="banner-img" alt="">  
    </div>
</div>

Notice that in the above code, that we have added an extra class to the slide items.

 

Now, in the same file, add the following code before the end of the </head> tag (should be near line no. 19) so that it appears like this:

<style>
    @media screen and (max-width: 479px){
        .slider-item.item1 {
            background-image: url('... path of the portrait image of first slide image here ...') !important;
        }
        .slider-item.item2 {
            background-image: url('... path of the portrait image of second slide image here ...') !important;
        }
    }
</style>
</head>

You will have to choose a specific portrait image for specific slides and give the path of those images in the respective URL paths in the above code.

 

Hope I was able to explain the steps properly. Let us know if this helped.

 

Thanks and regards,

0effort Team