Slider background on mobile

Hello,

When I open my website on a mobile the grey background of slider appears behind the image. 

The proportions of image and text is good on a pc browse window, although it's not seem ok on a mobile.

How to solve this issue? 

https://zionpilates.com/


Thanks,

Tagged:

Comments

  • Hi krnflks

    It's really strange. Please deactivate all your plugin one by one and then check. Also if you have added any customized code in theme core file please undo that and then check again.

    Let me know.

    Thanks
    A
  • Hi Abhishek,

    When I deactivate Jetpack plugin, solves my problem with mobile screen. But I lost my gallery layout.

    I modified only 2 codes :

    - Add google-site-verification in header.php
    - And <div class="col-md-6 col-sm-6 team-effect"> in about-us.php



  • Hi krnflks

    Ok, no problem use given below custom CSS rule in your theme custom CSS box.

    .img-responsive{
       height: fit-content;
    }

    Let me know did it work.

    Thanks
    A


  • Good morning Abhishek,

    It worked with slider issue, but it messed up blog thumbnail and the header image of others pages. 

    I activated jetpack plugin and changed the image of slider (1299 × 866) to the recommended size (1600x750) and i had the same problem i had before with the mobile, before i use te CSS rule (grey background). Look the attached image.

    Another thing I realized is that the gallery doesn't have the beautiful proportion as presented as model in: https://webriti.com/demo/wp/preview/?prev=wallstreet/, them i used the side bar widgets to mask the issue. Look:


    I believe that we are having a conflict with jetpack plugin configuration or version. The version presented in tutorial is different of i used (Version 6.3.2), maybe i used some wrong configuration.

    Best regard,

    2018-07-19 (4).png
    934K
  • edited July 2018
    Hi krnflks

    Undo the above given css code and add the new one css 

    .slide .img-responsive {
        height: fit-content;
    }

    Please create a new ticket for your gallery page query.

    Thanks
    A
  • Good morning Abhishek,

    .slide .img-responsive... didn't work. 

    I used:
    .homepage_mycarousel .img-responsive {
        height: fit-content;
    }

    and it worked! 

    I'm opening a new ticket for gallery.

    Thank you very much, 

  • Hi krnflks

    Glad to know its work for you.

    Closing this ticket.

    Thanks
    A
This discussion has been closed.