Public Forums 71,145 posts

[pittigeteksten Friend pittigetekstenJoin date: December 2012Posts: 58Downloads:47Uploads:9 Thanks: 17 Thanked: 1 times in 1 posts]

#196978

In the Purity III features layout (the default layout for the quick install version), the masthead extends to fill the whole screen width. However if I want to add a video to the masthead, only a small window is shown. Can I use the entire width for displaying video, photo’s or even a virtual tour opened within an iframe? I’d like to use this when building a new and modernized site for http://www.molenvrienden.nl (a site for the volunteers keeping monumental windmills in operation in the Netherlands).

Pierre

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#531936

Is this the site http://www.molenvrienden.nl/ where purity iii is installed. If not provide the right one to suggest.

Add this code to custom.css , documentation http://t3-framework.org/documentation/bs3-customization#custom-css

.page-masthead .container{
width:100% !important;
}

[pittigeteksten Friend pittigetekstenJoin date: December 2012Posts: 58Downloads:47Uploads:9 Thanks: 17 Thanked: 1 times in 1 posts]

#532315

Thanks! That made it bigger, however there are still unwanted margins around the slideshow I have now in the masthead. I am building the new site on http://x.molenvrienden.nl.

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

#532316

Try adding this code to your custom.css:


.row-feature {
margin-left: -20px; margin-right: -20px;
}

See if that does the trick for you with regard to the margins for the slideshow.

1 user says Thank You to TomC for this useful post

1. pittigeteksten

[pittigeteksten Friend pittigetekstenJoin date: December 2012Posts: 58Downloads:47Uploads:9 Thanks: 17 Thanked: 1 times in 1 posts]

#532318

Now that I know that, I have modified it to:

.row-feature {
margin-left: -20px; margin-right: -20px;
margin-top: -100px; margin-bottom: -60px;
}

This looks good in my opinion!

[pittigeteksten Friend pittigetekstenJoin date: December 2012Posts: 58Downloads:47Uploads:9 Thanks: 17 Thanked: 1 times in 1 posts]

#532319

Wait a minute, changing the margins has unexpected effects when making the screen smaller, as you can see on the screenshot below:

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#532335

Go to this File: /templates/purity_iii/css/custom.css

Replace this code


.page-masthead .container{ width:100% !important; }

With

.page-masthead .container {
padding: 0 !important;
width: 100% !important;

}

1 user says Thank You to chavan for this useful post

1. pittigeteksten

[pittigeteksten Friend pittigetekstenJoin date: December 2012Posts: 58Downloads:47Uploads:9 Thanks: 17 Thanked: 1 times in 1 posts]

#532452

That works even better, since it affects the masthead only. I adjusted it to my taste as follows:

.page-masthead .container {
padding: 0 !important;
width: 100% !important;
margin-top: -60px; margin-bottom: -30px;
}

[Author]

Posts