Public Forums 71,145 posts

[victor_ncr Friend victor_ncrJoin date: April 2014Posts: 10Downloads:0Uploads:1]

#531680

I did exactly the same.. added the width: 100% property to the above rule within custom.css.
Nothing works

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#531685

It would really be helpful if you could get your site online.

[whitely3000 Friend whitely3000Join date: April 2014Posts: 5Downloads:0Uploads:0]

#531725

Hello,
I also need a solution to this please. But I’ve found the culprit:

1. it’s the .container width set in templates.purity_iii.less.bootstrap.less.css – if to change it to 1,900px, for example, for the wide screen then everything works fine for the Slideshow – it stretches
2. the gap on left and right hand sides is due to 20px padding added to the container, so I changed it as follows:

.container {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;

However, obviously now all elements on the page, which are wrapped in .container have changed, too!! And are not looking good..

I guess it should be something separate for the slideshow like .container.slideshow , but I am a complete novice, not a developer, so please help how to solve this.

Thank you!

[whitely3000 Friend whitely3000Join date: April 2014Posts: 5Downloads:0Uploads:0]

#531727

I’ve tried to create a new class .container-slideshow , however the problem is that there are two containers, and hence changing the slideshow’s HTML code to <div class=”container-slideshow”> does not work because there is another <div class=”container”> wrapping it after the Masterhead . How can I change that to my new class???

Just checked with Inspect Element and changed the second offending <div class=”container”> to <div class=”container-slideshow”> and it works perfectly! The slideshow now covers the whole window width.

All I need now is to find the way to change the first container class. HELP please! 🙂

Thanks

[whitely3000 Friend whitely3000Join date: April 2014Posts: 5Downloads:0Uploads:0]

#531728

Ok SOLVED! I cannot believe it… Whoever has the same problem just open the Slideshow module, go to “Advanced” tab, and then change Module Style (at the very bottom) to “none” – this removes the first container, whereas for the second one, create the new CSS class as described above.

P.S. I’ve also changed the width for all media for .container-slideshow class to just 100%

[victor_ncr Friend victor_ncrJoin date: April 2014Posts: 10Downloads:0Uploads:1]

#531790

Cool, Solved, thank you so much !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#531794

<em>@whitely3000 422798 wrote:</em><blockquote>
P.S. I’ve also changed the width for all media for .container-slideshow class to just 100%</blockquote>

Isn’t this what I suggested above?

Glad you were able to sort things out to your satisfaction.

😎

[Author]

Posts