Issues with two images displaying on HTML/CSS/JS powered slideshow

[mikehermary]

I am converting my client’s website to be responsive and the slideshow that is displayed on the homepage here: http://staging.horizoncosmeticcentre.ca is exhibiting some weird behaviour. The first and third slides do not match the width of the device screen size and fill the viewport. The second slide does display correctly. All three slides use the same CSS, so I am not sure why this is occurring. When the homepage is viewed on large screens like tablets and desktop computers, there is no issues. The slide container CSS is included below. Any ideas?

/* --- Slide Containers --- */
#fpssContainer0.fpss-template-simple .slides-wrapper {width:100%;max-width:100%;height:auto;position:relative;overflow:hidden;}
#fpssContainer0.fpss-template-simple .slides-wrapper .slides .slide {width:100%;max-width:100%;height:auto;top:0;overflow:hidden;}
#fpssContainer0.fpss-template-simple .slides-wrapper .slides > .slide:first-child {position:relative !important}
#fpssContainer0.fpss-template-simple .slides-wrapper .slides .slide a.slide-link {display:block;width:100%;max-width:100%;height:450px;position:relative;}
#fpssContainer0.fpss-template-simple .slides-wrapper .slides .slide a.slide-link span {display:block;width:100%;max-width:100%;height:450px;background-position:left top;background-size:cover !important}
#fpssContainer0.fpss-template-simple .slides-wrapper .slides .slide .slidetext div {width:550px;position:absolute;right:0;bottom:100px;left:15px;z-index:1;}
#fpssContainer0.fpss-template-simple .slides-wrapper .slides .slide.reverse .slidetext div {right:15px;left:auto;text-align:right}

@media only screen and (max-width: 977px) {
    #fpssContainer0.fpss-template-simple .slides-wrapper .slides .slide a.slide-link span {height:350px}
    #fpssContainer103.fpss-template-simple .slides-wrapper .slides .slide .slidetext div,#fpssContainer103.fpss-template-simple .slides-wrapper .slides .slide.reverse .slidetext div{width:auto;right:15px;bottom:0;left:15px}
    #fpssContainer0.fpss-template-simple .slides-wrapper .slides .slide.reverse a.slide-link span {transform:scaleX(-1);}
    #fpssContainer0.fpss-template-simple div.navigation-wrapper {display:none}
}

[Atelierbram]

On line 80 of template.css try to compensate for the difference in height (on small screens on that media-query) between the span containing the background-image with height: 350px and the containing link with height: 450px.

The math: 450 / 3.5 = 77%. When adapting the background-size height like that, it will be within the viewport again, although on some screens a bit stretched, so maybe play around with those values a bit within media-queries.

@media only screen and (max-width: 977px) {
#fpssContainer103.fpss-template-simple .slides-wrapper .slides .slide a.slide-link span {
  height: 350px;
  background-size: 100% 77% !important;
}

[Atelierbram]

Even better, try the so-called “intrinsic ratio or padding-bottom hack”:

@media only screen and (max-width: 977px) {
  #fpssContainer103.fpss-template-simple .slides-wrapper .slides .slide a.slide-link span {
    height: 0;
    padding-bottom: 39.54%;
  }
}

450 / 11.38 = 39.54%

[mikehermary]

I tried your solutions, but neither worked. Both caused the images to site near the top of the container and left the text at the bottom. Any other suggestions?

[Atelierbram]

Well … at least the images are into view no? Let’s take it from there if you want the images and text combined, maybe something like:

@media only screen and (max-width: 977px) {
  #fpssContainer103.fpss-template-simple .slides-wrapper .slides .slide a.slide-link span {
    /* min-height: 350px; */
    background-size: 100% 100% !important;
    background-position: left top !important;
    height: 0;
    padding-bottom: 39.54%;
  }

  .fpss-template-simple .slidetext p {
    background-color: rgba(255,255,255,.5);
  }

}

[mikehermary]

I was on a deadline for this project, so I took a different route and created a second slideshow for screen sizes with a max width of 977 pixels or below. In this slideshow I had all of the image left aligned. It is not the best solution, but I could not continue to fight with the CSS. Thanks for your assistance.

[Atelierbram]

Kudos for transform: scaleX(-1); /* flips the element along the x-axis */ that is clever, although it destroys the symptom but doesn’t cure the cause it does work here, and circumstances can force one to be pragmatic! I guess the horizontal flipping solution could also have worked with just swapping that one image with the guy out on mobile (with it’s reversed mirrored version), keeping just the one slideshow, but I don’t know, maybe there’s issues with that as well. Not a bad solution at all.

[Author]

Posts