Header slider image not shown in smartphone

Hi,

I hope you are wel.
I have 3 header slider images, they are perfectly shown in the computer version, but I can only see the rabbit one on my smartphone. petsittingdiary.com is the link of my website. Please help.

Hello there,

It might be related to this topic https://athemes.com/forums/topic/slider-images-not-resized-for-iphone6plus/

Regards,
Kharis

Hi Kharis,

I have applied the following code to Simple Custom CSS. The problem is still not resolved, although the rabbit image does resize to fit the smartphone screen size which looks much better. Can you please try to access my website (petsittingdiary.com) with the REAL smartphone so that you will see the difference. The mock smartphone function in the theme customizer can show the website perfectly, which is not the same as in the real smartphone. Will this problem related to the image size? Wait for your help. Thanks!

@media only screen and (max-width: 900px){
#slideshow{
height: 400px !important;
}
}

@media only screen and (max-width: 600px){
#slideshow{
height: 210px !important;
}

.text-slider-section{
top: 40%;
}

}

#slideshow .slides-container .slide-item{
background-position: top center !important;
background-size: 100% !important;
}

Hi again,

To let you know, I am using iPhone 5.

In addition, my partner use Samsung Note 4. After applying the code, she cannot see the primary call to action button in her smartphone screen, although I can see it in my iPhone screen.

It looks like the size of the header slider image not fit all types of screen. Please let me know how to fix it.

Hi again,

I also want this effect appearing on my testimonials section and photo gallery section (that is the portfolio section). How can I change the code to achieve it?

Hi Kharis,

I know you are busy. Sorry for borthering you for many questions. Hope you still here and help me please.

Hello there,

I am looking into it again. I will update you ASAP. Please be patience.

Regards,
Kharis

Hello there,

Please remove the custom CSS code I suggested previously. Then do the following steps:

  1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

  2. Paste the following to the “Scripts in header:” box


<style type="text/css">
@media only screen and (max-width:1024px){

  .slide-inner {
      -webkit-transform: translateY(-30%) !important; 
      -moz-transform: translateY(-30%) !important;
      -ms-transform: translateY(-30%) !important;
      -o-transform: translateY(-30%) !important;
      transform: translateY(-30%) !important;
  }
  
}
</style>

  1. Paste the following to the “Scripts in footer:” box

<script type="text/javascript">
;(function($) {

   'use strict'

   if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {

    $(window).on('load resize', function() {

      var theElem   = $('.slide-item');

      theElem.each(function(){

        var bgTheElem = $(this).css('background-image');
        var bgURL     = bgTheElem.replace('url(','').replace(')','').replace(/\"/gi, "");

        var createIMG = '<img class="create-image-from-bg" style="opacity: 0;" src="'+bgURL+'" />';
        $(this).parent().append(createIMG);

        var imgHeight = $('.create-image-from-bg').height();

        $('.create-image-from-bg').css({
          'position': 'absolute',
          'top' : '0',
          'left' : '0 !important',
          'width': '100% !important',
          'height': 'auto !important'
        });

        $('#slideshow').css('height', imgHeight);

        $(this).css({
          'background-size': '100% !important',
          'background-position': 'top left !important'
        });

      });

    });

  }

})(jQuery);
</script>

  1. Save settings

You would need to clear your web browser’s cache before reloading your site to see the code addition takes affect.

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi Kharis,
Thanks for your help!
I have applied the new code in the plugin you just mentioned and deleted all of the old code. The website in computer seems not thing changed. That’s good. But, in the iPhone, the header slider images run correctly at first, and worst from the second round and thereafter. These 3 pictures are the screen shots from my iPhone. Please have a look:
website in iPhone "1"
website in iPhone "2"
website in iPhone “3”

Moreover, I don’t know whether your code including the testimonial section. This picture is the screen shot from my iPhone:testimonial in iPhone
I think the words are responsive, but the background isn’t.

Thank you for reporting. I would like to apologize in advance for inconvenience. I am looking into it again. I will update you ASAP.

Regards,
Kharis

To update you, I have resized all of my header slider images to the same size (1920*1280). They work fine on both of my iPhone and my partner’s note5. I this the problem is solved.

However, about the responsiveness of testimonial section (petsittingdiary.com/#pg-122-1), the about us (http://petsittingdiary.com/about/), their words are great in phone screen, but the background is not. I don’t know whether it is a kind of “responsive”, or it is a problem? Thanks again Kharis.