.slides-container .slide-item FULLSCREEN

Hi,

I’m creating a website on the free Sydney theme and I need help for the .slides-container .slide-item because every pictures that I put are cut off on the bottom.

I read on the forum that the “problem” of the background-size comes from cover.

So I Would like to know how can I have my picture full screen but not cut at the bottom?
DO I have to change size of the picture? If yes, which size ?
Do I have to put a code on the CSS ?

My website is: www.anaismichelin.com and it’s for the homepage.

(I am sorry for my english I am french)

Thank you for your help.

Hello there,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.slides-container .slide-item {
  background-position: bottom center !important;
}  

Let me know how it works for you.

Regards,
Kharis

Hello Kharis,

Thank you for your answer.

I have tried your code in my child theme and nothing changed.

I left the code on the css, please can you have a look: www.anaismichelin.com

What do you think ?

Thanks

Hello there,

Thank you for the followup. It is what I am seeing https://cloudup.com/cStppvQ_G7n. The bottom side of the image is fully visible. If you see nothing changed, maybe it was just a matter of browser’s cache. Please clear cache and try again.

Regards,
Kharis

Hello Kharis,

The homepage works well on my laptpop but it’s not responsive design on Ipad or mobile.
This theme is supposed to be responsive so what do you think?

Regards,

Seb

Dear Seb,

Basically, that is how responsive background image works on smaller screen. As your reference, please see the WP.org blog post (on “Responsive Images” section). But it seems like doesn’t meet your need. I would kindly suggest you try adding this custom CSS code:


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

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

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

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

Adjustment on other specific media query might be needed.

Regards,
Kharis

Thank you very much Kharis you’re the best! it’s working well !