Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Watch Video

Posted February 3, 2016 12:41pm by

Flexbox affecting my iframe

I have used this same code for flexbox for my footer and layout. However it is affecting the size of my iframe that I have from a template. Is there a way to allow this not to happen?

February 4, 2016 12:23pm

Could you provide a code sample? It's easier to answer if I can see the code.

February 4, 2016 12:38pm

Rajen Tandel Well I have managed to sort it out. By moving the display:flex code to the wrapper. Which can be seen in my CSS code below. However now when I create a sticky footer according to this video I think the problem will arise again. Not sure how to go about that.

My css code;

/***********************
web fonts
/***********************/
@font-face{
    font-family: 'U.S. 101';
    src: url('../fonts/US101.ttf') format('truetype');

}


/************************
GENERAL
************************/
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html{
  position:relative;
  min-height: 100%;
}
body{
    font-family: proxima-nova, sans-serif;


}

.row{
    1;
}

#wrapper {
  display: flex;
  flex-direction : column;
  min-height: 100vh;
  max-width: 940px;
  min-width: 280px;
  margin: 0 auto;


}

a {
   text-decoration: none;
}

img{
  max-width: 100%; 
}


h3{
  margin: 0 0 1em 0;

}


/************************
HEADING
************************/

header{
  float:left;/*useful for desktop layout*/
  margin: 0 0 15px 0; 
  padding: 5px 0 0 0;
  height: 300px;
  background: linear-gradient(#fff,transparent 30%),
        linear-gradient(0deg, #fff,transparent),
        #fff url('../img/header.jpg') no-repeat center;
  background-size: cover;
  width: 100%;
}

header h1,h2{

  font-family: 'U.S. 101',sans-serif;
}


#logo{
  text-align: center;
  margin: 0;
}

header h1{

  margin-top: 120px;
  margin-bottom: 10px;
  font-weight: bold;
  letter-spacing: 18px;
  font-size: 2.5em;
  line-height: 1em;
}
header h2{

  top:-200px;
  padding-top:-200px;
  font-weight: bold;
  letter-spacing: 5px;
  padding-right:5px;
  font-size:1em;
}

/************************
NAVIGATION
************************/

nav{
  font-family: 'U.S. 101',sans-serif;
  text-align: center;
  padding: 10px 0;
  margin: 30px 0 20px 0;
  letter-spacing:3px;
}

nav ul{
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li{
  display: inline-block;
}

nav a{
  font-weight: 800;
  padding: 15px 10px;

}

nav a:hover{
  text-shadow: 0px 0px 20px #fff;
}



/************************
FOOTER
************************/



.main-footer { 
/*  text-align: center;*/
  background: #d9e4ea;
  width:100%;
}

#mayur{
  font-size:0.8em;
  position:relative;
  text-align:center;
}


.social-media{

}



.social-media ul{
  padding:0;
  text-align: center;
}

.social-media li{
  display: inline;
  list-style:none;
  width:15%;
  padding:5px;

}
.social-media li img {
 width: 2.5em; 
}

@media screen and (min-width: 801px) {

  /*.main-footer{
    height:100px;
  }*/


  .social-media ul{
    margin-top:-70px;
    margin-right: 30px;
    float:right;
  }

  #mayur {
    float:left;
    top:-91px;
    left:10px;
    font-size:1em;
  }
}




/************************
PAGE: PORTFOLIO
************************/

.showreel-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
}


/* Your styles for the iframe */
.showreel-container iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

button{
  font-family: 'Helvetica Neue', arial, sans-serif;
}

#controls{
  padding: 2%;
/*  background: #333;*/
  background: #fff;
  color: #aaa;
  margin-left: 140px;

}

label{
  font-weight: 300;
  margin: 0 .4em 0 0;
}

button{
  display: inline-block;
  padding: .4em .8em;
  background: #666;
  border: 0;
  color: #ddd;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
}

button:hover{
   background: #68b8c4;
}

button.active{
  background: #68b8c4;
}

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}

.container{

  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
/*  background: #68b8c4;*/
  background: #fff;



  -webkit-backface-visibility: hidden;
}

.container:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container .mix,
.container .gap{
  display: inline-block;
  width: 49%;
}

.container .mix{
  text-align: left;
  /*background: #03899c;
  margin-bottom: 2%;*/
  display: none;
}

.container .mix.category-1{
  border-top: 2px solid limegreen;
}

.container .mix.category-2{
  border-top: 2px solid yellow;
}

.container .mix:after{
  content: attr(data-myorder);
  color: white;
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  padding: 4% 6%;
  font-weight: 700;
}

.container .mix:before{
  content: '';
  display: inline-block;
  /*padding-top: 60%;*/
}

.container .mix img {
  padding: 3px;
  max-width: 100%;
/*
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
*/
}


@media all and (min-width: 420px){
  .container .mix,
  .container .gap{
    width: 32%;
  }
}

@media all and (min-width: 640px){
  .container .mix,
  .container .gap{
    width: 23.5%;
  }
}

    @media screen and (max-width: 800px) {
        #menu {
            width:1.4em;
            display: block;
            background:#ddd;
            font-size:1.35em;
            text-align: center;
      margin-top:30px;
      margin-bottom:20px;

        }
        #controls.js {
            display: none;
        }
        #controls {
            width:100%;
      margin-left:0;


        }
    button{
      display:block;
      margin: 3px;
      margin-top:2px !important;
    }

    }

    @media screen and (min-width: 800px) {
        #menu {
            display: none;
        }
    }

/***********************
PAGE: item
***********************/
#h {
    font-family: 'U.S. 101',sans-serif;
    margin-top:0;
    text-align:center;
    letter-spacing:5px;
    font-size: 1.75em;
    margin-bottom: 40px;
}

.docs {

    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
}

/* Your styles for the iframe */
.docs iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;

}

#role{
    text-align:center;
    font-size: 0.9em;
}


#prod_desc{
    text-align:center;
    font-size: 0.9em;
}



/************************
PAGE: ABOUT
************************/

.primaryCol img{
   width:100%;
   margin: 0 auto;
   top: -20px !important;
   margin-right:10px;
}

.secondaryCol h3{
  font-family: 'U.S. 101',sans-serif;
  letter-spacing:1px;
  margin-top:20px !important;
  margin:0 auto;
  width:80%;
}

.secondaryCol p{
  margin:0 auto;
  width:80%;
  padding: 7px 0;
  font-size:0.9em;
}

.secondaryCol dl{
    width:80%;
    font-size:0.9em;
    margin: 0 auto;

}

@media screen and (min-width: 480px){
  /************************
  TWO COLUMN LAYOUT
  ************************/
    .row{
        display:flex;
    }

    .primaryCol,.secondaryCol{
        flex:1;
    }
    .secondaryCol{

        margin-top:-24.5px;
    }
}


/************************
PAGE: CONTACT
************************/
#contactContainer{
    display:flex;
    min-height:25vh;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin-top:20px;

}



#details h3{
    font-family: 'U.S. 101',sans-serif;
    letter-spacing:1px;
    text-align:center;
}

#details p{
    text-align:center;
}

.contact-info{
    margin-left: 60px;
}


.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;

}

.contact-info a {

    display: block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 0 0 0 30px;
    margin: 0 0 10px;
}



.contact-info li.phone a {
   background-image: url('../img/phone.png');
}

.contact-info li.mail a {
   background-image: url('../img/mail.png');
}

.contact-info li.vimeo a {
   background-image: url('../img/vimeo.png');
}

@media screen and (min-width: 480px){
  /************************
  TWO COLUMN LAYOUT
  ************************/
    .contact-info {
        margin-left:67px;

    } 

}



/************************
COLOURS
************************/

/* site body */
body{
   background-color: #fff;
   color: #999;
}


/* logo text */
h1,h2{
  color: #222;
}


/* links */
a {
  color: red; 
}

/* colour for nav link */
nav a, nav a:visited {
  color: #222;
}

/* selected nav link colour */
nav a.selected, nav a:hover{
  color: #666;
}

February 4, 2016 12:55pm

How about the HTML? I'm not sure what's wrong, I'll help figure it out though.

February 4, 2016 7:07pm

Rajen Tandel Hi sorry for late reply was elsewhere, below is my html code;

here is my index file;

<?php
  require_once('database.php');
  try{

    $result = $conn->query('SELECT id FROM documentaries');

  }catch(Exception $e){
    echo $e->getMessage();
    die();
  }

 $docs = $result->FetchAll(PDO::FETCH_ASSOC);


?>

<!DOCTYPE html>
<html>
  <head>

      <meta charset="utf-8">
      <title>Tom Turner - Director of Photography</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>


  <body>
    <header>
      <a href="index.php" id="logo">
        <h1>Tom Turner</h1>
        <h2>Director / DOP / Editor</h2>
      </a>
      <nav>

          <ul>
            <li><a href="index.php" class="selected">Portfolio</a></li>
            <li><a href="/about.php" >About</a></li>
            <li><a href="/contact.php">Contact</a></li>
          </ul>

      </nav>
    </header>

    <div id="wrapper">

        <section>
            <div class="showreel-container">
                <iframe src="https://player.vimeo.com/video/148640837?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
        </section>

        <section>

            <div id="controls" id="Controls">

                <button class="filter" data-filter="all">All</button>
                <button class="filter" data-filter=".documentaries">Documentary</button>
                <button class="filter" data-filter=".commercial">Commercial</button>
                <button class="filter" data-filter=".charity">Charity/NGO/Commisions</button>
                <button class="filter" data-filter=".music">Music</button>
                <button class="filter" data-filter=".drama">Drama</button>

            </div>



            <div id="Container" class="container">

            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "1"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'">
                                <img src="img/OneLongJourneyThumb.jpg" alt="One Long Journey Thumbnail"/>
                                <span class="text-content"><span>One Long Journey</span></span>
                              </a>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "2"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/britishbornchinese.jpg" alt="British Born Chinese Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "3"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/savingancoatshostpital.jpg" alt="Saving Ancoats Hospital Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "4"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/leavinglondonbehind.jpg" alt="Leaving London Behind Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "5"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/ersccommisions.jpg" alt="ERSC Comissions Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix commercial">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "6"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/fitbit.jpg" alt="Fitbit Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix commercial">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "7"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/stubhub.jpg" alt="Stubhub Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "8"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/capturingstudent.jpg" alt="Capturing The Student Experience Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "9"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/missionstatement.jpg" alt="Mission Statement - The Elders Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "10"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/worldleaders.jpg" alt="World Leaders Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "11"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/israelandpalestine.jpg" alt="Israel and Palestine Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "12"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/kidscompanykidness.jpg" alt="Kids Company Kindness Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix music">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "13"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/LittleUnsaidThumb.png" alt="Little Unsaid Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix music">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "14"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/bollywoodbrassband.jpg" alt="Bollywood Brass Band Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix drama">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "15"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/frenchkissing.jpg" alt="French Kissing Thumbnail"/></a>';
                    }
                }
            ?>
            </div>


            <div class="gap"></div>
            <div class="gap"></div>

        </div>

      </section>


    </div>

     <footer class="main-footer">





      </footer>


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
      <script type="text/javascript" src="js/responsivemenu.js"></script>
  </body>
</html>

here is my portfolio/item page

<?php
  require_once('database.php');
  if(!empty ($_GET['id'])){
    $id = intval($_GET['id']);

      try{
        $result = $conn->prepare('SELECT * FROM documentaries WHERE id = ?');
        $result->bindParam(1,$id);
        $result->execute();

      }catch(Exception $e){
        echo $e->getMessage();
        die();
      }

      //stores 1000 array of films in $films
      //different method fetch
      $doc = $result->Fetch(PDO::FETCH_ASSOC);
      if($doc == FALSE){
        echo 'sorry a doc could not be found with the id provided';
        die();
      }
  }




?>

<!DOCTYPE html>
<html>
  <head>

      <meta charset="utf-8">
      <title>Tom Turner - Director of Photography</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
  <body>
    <header>
      <a href="index.php" id="logo">
        <h1>Tom Turner</h1>
        <h2>Director / DOP / Editor</h2>
      </a>
      <nav>

          <ul>
            <li><a href="index.php" class="selected">Portfolio</a></li>
            <li><a href="/about.php">About</a></li>
            <li><a href="/contact.php">Contact</a></li>
          </ul>

      </nav>
    </header>

    <div id="wrapper">


            <h1 id="h">
                <?php
                    echo $doc['title'];
                ?>
            </h1>



            <?php
                if((!(is_null($doc['link2']))) && (!(is_null($doc['link3'])))){
                    echo '<div class="docs">'.$doc['link'].'</div>';
                    echo '<br /><br />';
                    echo '<div class="docs">'.$doc['link2'].'</div>';
                    echo '<br /><br />';
                    echo '<div class="docs">'.$doc['link3'].'</div>';
                }else{
                    echo '<div class="docs">'.$doc['link'].'</div>';
                }
            ?>

            <br /><br />

        <div id="role">
            <?php
                if(is_null($doc['description']) && is_null($doc['extra_description'])){
                    echo $doc['length'];
                }else if(is_null($doc['length']) && is_null($doc['extra_description'])){
                    echo $doc['description'];
                }else if(is_null($doc['length']) && is_null($doc['description'])){
                    echo $doc['extra_description'];
                }else if(is_null($doc['extra_description'])){
                    echo $doc['length'];
                    echo '<br /><br />';
                    echo $doc['description'];
                }else if(is_null($doc['description'])){
                    echo $doc['length'];
                    echo '<br /><br />';
                    echo $doc['extra_description'];
                }else if(is_null($doc['length'])){
                    echo $doc['description'];
                    echo '<br /><br />';
                    echo $doc['extra_description'];
                }else{
                    echo $doc['length'];
                    echo '<br /><br />';
                    echo $doc['description'];
                    echo '<br /><br />';
                    echo $doc['extra_description'];
                }

            ?>
        </div>

        <div id="prod_desc">
            <p>
                <?php
                    if(is_null($doc['role']) && is_null($doc['extra_info'])){
                        echo $doc['production_credit'];
                    }else if(is_null($doc['production_credit']) && is_null($doc['extra_info'])){
                        echo 'Credit: ';
                        echo $doc['role'];
                    }else if(is_null($doc['production_credit']) && is_null($doc['role'])){
                        echo $doc['extra_info'];
                    }else if(is_null($doc['extra_info'])){
                        echo $doc['production_credit'];
                        echo '<br /><br />';
                        echo 'Credit: ';
                        echo $doc['role'];
                    }else if(is_null($doc['role'])){
                        echo $doc['production_credit'];
                        echo '<br /><br />';
                        echo $doc['extra_info'];
                    }else if(is_null($doc['production_credit'])){
                        echo 'Credit: ';
                        echo $doc['role'];
                        echo '<br /><br />';
                        echo $doc['extra_info'];
                    }else{
                        echo $doc['production_credit'];
                        echo '<br /><br />';
                        echo 'Credit: ';
                        echo $doc['role'];
                        echo '<br /><br />';
                        echo $doc['extra_info'];
                    }

                ?>
            </p>
        </div>
        <div><br /><br /></div>


    </div>

     <footer class="main-footer">




       <div id="mayur">

      </footer>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
      <script type="text/javascript" src="js/responsivemenu.js"></script>

  </body>
</html>

if you need more please let me know

February 4, 2016 11:07pm

NP, I'm always on in the mornings and evenings. I wouldn't have come back until around this time anyway. Try creating the sticky footer. I don't think it should affect the size of the iFrame again. How large do you want it to be? I placed the section containing the iframe before the wrapper and it now takes up the entire width and the entire height of it's container.

February 5, 2016 12:10am

I still seem to get a slight error, the footer looks good for my index/portfolio page with all the iframes the correct size however it is not sticking for the contact page. Below is the code;

index page

<?php
  require_once('database.php');
  try{

    $result = $conn->query('SELECT id FROM documentaries');

  }catch(Exception $e){
    echo $e->getMessage();
    die();
  }

 $docs = $result->FetchAll(PDO::FETCH_ASSOC);


?>

<!DOCTYPE html>
<html>
  <head>

      <meta charset="utf-8">
      <title>Tom Turner - Director of Photography</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>


  <body>
    <header>
      <a href="index.php" id="logo">
        <h1>Tom Turner</h1>
        <h2>Director / DOP / Editor</h2>
      </a>
      <nav>

          <ul>
            <li><a href="index.php" class="selected">Portfolio</a></li>
            <li><a href="/about.php" >About</a></li>
            <li><a href="/contact.php">Contact</a></li>
          </ul>

      </nav>
    </header>

    <div id="wrapper">

        <section>
            <div class="showreel-container">
                <iframe src="https://player.vimeo.com/video/148640837?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
        </section>

        <section>

            <div id="controls" id="Controls">

                <button class="filter" data-filter="all">All</button>
                <button class="filter" data-filter=".documentaries">Documentary</button>
                <button class="filter" data-filter=".commercial">Commercial</button>
                <button class="filter" data-filter=".charity">Charity/NGO/Commisions</button>
                <button class="filter" data-filter=".music">Music</button>
                <button class="filter" data-filter=".drama">Drama</button>

            </div>



            <div id="Container" class="container">

            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "1"){
                        echo '<div class="imgWrap">
                                <a href="portfolio.php?id='.$doc["id"].'">
                                <img src="img/OneLongJourneyThumb.jpg" alt="One Long Journey Thumbnail"/>
                                <p class="text1">This image looks super neat.</p>
                                </a>
                             </div>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "2"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/britishbornchinese.jpg" alt="British Born Chinese Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "3"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/savingancoatshostpital.jpg" alt="Saving Ancoats Hospital Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "4"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/leavinglondonbehind.jpg" alt="Leaving London Behind Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix documentaries">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "5"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/ersccommisions.jpg" alt="ERSC Comissions Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix commercial">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "6"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/fitbit.jpg" alt="Fitbit Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix commercial">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "7"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/stubhub.jpg" alt="Stubhub Thumbnail"/></a>';
                    }
                }
            ?>
            </div>
            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "8"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/capturingstudent.jpg" alt="Capturing The Student Experience Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "9"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/missionstatement.jpg" alt="Mission Statement - The Elders Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "10"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/worldleaders.jpg" alt="World Leaders Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "11"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/israelandpalestine.jpg" alt="Israel and Palestine Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix charity">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "12"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/kidscompanykidness.jpg" alt="Kids Company Kindness Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix music">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "13"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/LittleUnsaidThumb.png" alt="Little Unsaid Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix music">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "14"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/bollywoodbrassband.jpg" alt="Bollywood Brass Band Thumbnail"/></a>';
                    }
                }
            ?>
            </div>

            <div class="mix drama">

            <?php
                foreach($docs as $doc){
                    if ($doc["id"] == "15"){
                        echo '<a href="portfolio.php?id='.$doc["id"].'"><img src="img/frenchkissing.jpg" alt="French Kissing Thumbnail"/></a>';
                    }
                }
            ?>
            </div>


            <div class="gap"></div>
            <div class="gap"></div>

        </div>

      </section>


    </div>

     <footer class="main-footer">
        <div class="footer-inner">
            <span>This is my footer</span>
        </div>
    </footer>


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
      <script type="text/javascript" src="js/responsivemenu.js"></script>
  </body>
</html>

portfolio/item template page

<?php
  require_once('database.php');
  if(!empty ($_GET['id'])){
    $id = intval($_GET['id']);

      try{
        $result = $conn->prepare('SELECT * FROM documentaries WHERE id = ?');
        $result->bindParam(1,$id);
        $result->execute();

      }catch(Exception $e){
        echo $e->getMessage();
        die();
      }

      //stores 1000 array of films in $films
      //different method fetch
      $doc = $result->Fetch(PDO::FETCH_ASSOC);
      if($doc == FALSE){
        echo 'sorry a doc could not be found with the id provided';
        die();
      }
  }




?>

<!DOCTYPE html>
<html>
  <head>

      <meta charset="utf-8">
      <title>Tom Turner - Director of Photography</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
  <body>
    <header>
      <a href="index.php" id="logo">
        <h1>Tom Turner</h1>
        <h2>Director / DOP / Editor</h2>
      </a>
      <nav>

          <ul>
            <li><a href="index.php" class="selected">Portfolio</a></li>
            <li><a href="/about.php">About</a></li>
            <li><a href="/contact.php">Contact</a></li>
          </ul>

      </nav>
    </header>


    <div id="wrapper">


            <h1 id="h">
                <?php
                    echo $doc['title'];
                ?>
            </h1>

            <?php
                if((!(is_null($doc['link2']))) && (!(is_null($doc['link3'])))){
                    echo '<div class="docs">'.$doc['link'].'</div>';
                    echo '<br /><br />';
                    echo '<div class="docs">'.$doc['link2'].'</div>';
                    echo '<br /><br />';
                    echo '<div class="docs">'.$doc['link3'].'</div>';
                }else{
                    echo '<div class="docs">'.$doc['link'].'</div>';
                }
            ?>




            <br /><br />

        <div id="role">
            <?php
                if(is_null($doc['description']) && is_null($doc['extra_description'])){
                    echo $doc['length'];
                }else if(is_null($doc['length']) && is_null($doc['extra_description'])){
                    echo $doc['description'];
                }else if(is_null($doc['length']) && is_null($doc['description'])){
                    echo $doc['extra_description'];
                }else if(is_null($doc['extra_description'])){
                    echo $doc['length'];
                    echo '<br /><br />';
                    echo $doc['description'];
                }else if(is_null($doc['description'])){
                    echo $doc['length'];
                    echo '<br /><br />';
                    echo $doc['extra_description'];
                }else if(is_null($doc['length'])){
                    echo $doc['description'];
                    echo '<br /><br />';
                    echo $doc['extra_description'];
                }else{
                    echo $doc['length'];
                    echo '<br /><br />';
                    echo $doc['description'];
                    echo '<br /><br />';
                    echo $doc['extra_description'];
                }

            ?>
        </div>

        <div id="prod_desc">
            <p>
                <?php
                    if(is_null($doc['role']) && is_null($doc['extra_info'])){
                        echo $doc['production_credit'];
                    }else if(is_null($doc['production_credit']) && is_null($doc['extra_info'])){
                        echo 'Credit: ';
                        echo $doc['role'];
                    }else if(is_null($doc['production_credit']) && is_null($doc['role'])){
                        echo $doc['extra_info'];
                    }else if(is_null($doc['extra_info'])){
                        echo $doc['production_credit'];
                        echo '<br /><br />';
                        echo 'Credit: ';
                        echo $doc['role'];
                    }else if(is_null($doc['role'])){
                        echo $doc['production_credit'];
                        echo '<br /><br />';
                        echo $doc['extra_info'];
                    }else if(is_null($doc['production_credit'])){
                        echo 'Credit: ';
                        echo $doc['role'];
                        echo '<br /><br />';
                        echo $doc['extra_info'];
                    }else{
                        echo $doc['production_credit'];
                        echo '<br /><br />';
                        echo 'Credit: ';
                        echo $doc['role'];
                        echo '<br /><br />';
                        echo $doc['extra_info'];
                    }

                ?>
            </p>
        </div>
        <div><br /><br /></div>


    </div>

     <footer class="main-footer">
        <div class="footer-inner">
            <span>This is my footer</span>
        </div>
    </footer>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
      <script type="text/javascript" src="js/responsivemenu.js"></script>

  </body>
</html>

about page

<!DOCTYPE html>
<html>
  <head>

      <meta charset="utf-8">
      <title>Tom Turner - Director of Photography</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/main.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
  <body>
    <header>
      <a href="index.php" id="logo">
        <h1>Tom Turner</h1>
        <h2>Director / DOP / Editor</h2>
      </a>
      <nav>

          <ul>
            <li><a href="index.php" >Portfolio</a></li>
            <li><a href="/about.php" class="selected">About</a></li>
            <li><a href="/contact.php">Contact</a></li>
          </ul>

      </nav>
    </header>

    <div id="wrapper">

        <div class="row">
            <div class="primaryCol">
                <img src="img/tom.jpg" alt="Tom Picture" />
            </div><!--/.primary-->



            <div class="secondaryCol">
                <h3>About Me</h3>
                <p>Tom is a freelance filmmaker based in London with a background in documentary film and anthropology.</p>

                <p>He directs, shoots and edits a diverse range of projects from documentaries to live performances and branded content.</p> 

                <p>He graduated with an MA in Visual Anthropology in 2011 with his graduation film "Leaving London Behind" shot with charity Kids Company receiving critical acclaim and being screened at festivals internationally. After a year working as a researcher for various production companies making documentaries for Channel 4, BBC and al Jazzeera he became freelance in 2013. Since then he has worked as a director, DOP and editor for many production companies, charities, research agencies and bands. Most notably he shot feature Documentary One Long Journey with friends and colleagues at all rites reversed.</p>

                <p>Tom is currently developing a number of documentary projects and a short drama.</p>

                <dl>
                <dt>Cameras</dt>
                    <br />
                    <dd>- Canon C300, C100, 7d, 5d</dd>
                    <dd>- Sony Fs7 and Fs5, Sony A7s, A7sii</dd>
                    <dd>- Panasonic GH4</dd>
                    <dd>- DV/Mini DV shooting</dd>

                <br /><br/>
                <dt>Editing</dt>
                    <br />
                    <dd>- Adobe CC Premier Pro</dd>
                    <dd>- FCPX</dd>
                    <dd>- Avid</dd>

                <br /><br/>
                <dt>Sound recording</dt>
            </dl>

            </div><!--/.secondary-->

        </div>

    </div>

     <br /><br/><br /><br/>
     <footer class="main-footer">
        <div class="footer-inner">
            <span>This is my footer</span>
        </div>
    </footer>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
      <script type="text/javascript" src="js/responsivemenu.js"></script>

  </body>
</html>

contact page

<!DOCTYPE html>
<html>
  <head>

      <meta charset="utf-8">
      <title>Tom Turner - Director of Photography</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
  <body>
    <header>
      <a href="index.php" id="logo">
        <h1>Tom Turner</h1>
        <h2>Director / DOP / Editor</h2>
      </a>
      <nav>

          <ul>
            <li><a href="index.php" >Portfolio</a></li>
            <li><a href="/about.php">About</a></li>
            <li><a href="/contact.php" class="selected">Contact</a></li>
          </ul>

      </nav>
    </header>

    <div id="wrapper">


      <section>

         <div id="contactContainer">

           <div id="details">

            <h3>Contact Details</h3>

            <p>If you would like to book or have any enquiries please contact on the details provided below;</p>
          </div>

          <div class="contact-info">
              <ul>

                <li class="phone"><a href="tel:07930543665">07930543665</a></li>
                <li class="mail"><a href="mailto:tom@allritesreversed.co.uk">tom@allritesreversed.co.uk</a></li>
                <li class="vimeo"><a href="https://vimeo.com/user6107855">Tom Turner Vimeo</a></li>

              </ul>
         </div>
        </div>


      </section>



    </div>

    <br /><br />

     <footer class="main-footer">
        <div class="footer-inner">
            <span>This is my footer</span>
        </div>
    </footer>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
      <script type="text/javascript" src="js/responsivemenu.js"></script>

  </body>
</html>

Also how did you get the iframe (from the index page) to work when you placed it outside the wrapper div I got really bad errors if I tried it that way either the frame was full-screen or when I wrapped it in another div it overlapped the header and using margin top just brought the header down with it.

With regards to the portfolio page iframe it was above the title from the template and was too small for some again.

Many Thanks

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Mayur Pande

Mayur Pande

Flexbox affecting my iframe

Rajen Tandel

Rajen Tandel

Mayur Pande

Mayur Pande

Rajen Tandel

Rajen Tandel

Mayur Pande

Mayur Pande

Rajen Tandel

Rajen Tandel

Mayur Pande

Mayur Pande