Css issue

[Objectif-Mariage+ 4]

Hi. 

I struggle to adapt a slide show at 100%. I can't figure where the problem come from. I guess it's CSS or LESS, but can't found it. (https://www.wedding-photography-minneapolis.com/test/). 
When I resize the browser size with my mouse, then everything fit well. But when It first shows, the image is not 100% the size of the browser .

I use to have the kind of issues on this page (https://www.wedding-photography-minneapolis.com/portfolio/couple/), and I have been told to add this css option : 

#new-royalslider-1 .rsOverflow {
width: 100%!important;}
#new-royalslider-1 .rsOverflow img {
width: 100%!important;}

I have try to do the same here (remplace #new-royalslider-1 by #new-royalslider-10 , but it does not fix the problem). 

Who have an Idea please ? 

 

[Andrew 207]

Seems to be an issue with the way Royal Slider is working.. have you checked their docs? This is calculated via the plugin JS so its going to be hard to fix with pure CSS

[Objectif-Mariage+ 4]

Oh :-/ . 

But when I resize the web page with the browser, then the image fill perfectly the web page (the image resized to the good dimension). I had the same issue with the other page  (https://www.wedding-photography-minneapolis.com/portfolio/couple/), that had been solved by adding some css. (but the same code does not work here, probably because I use the slider with a tiny different option)

I think that when the slider is generated, the slider take 100% width of the space it have.  So if the slider is inside a "boxe" (or <div>) that is only 90% width of the screen, then the slider will take the 100% of those 90% = 90% of the screen.  I am clear ? Some time when the page is generated, you can see than there is severals steps. and size of elements evolve during different steps.  And there is also some priority order that could make than even an element is set on 100% width, it wont work because the "father" ot this element apply its own rule with a higher level of priority .

Maybe I'm wrong. 
What's I'have read from the documentation, it should not be a problem. But i don't understand every thing.  What I am sure, is that I use the same plugin on other pages, and that It works perfectly (with the good css ajustement).

[Objectif-Mariage+ 4]

Well. I think I was write. The parent element of the Slideshow , has a size who changed during the page was load. 

So I fixe the problem by delay the time the plugin created image, by simply activate my optimisation plugin (Autoptimize). So I did not really "fixe it" , but now it's work!