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

CSS

Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

certain iframes not same size as others

Hi I already asked this question here but got no answers. So thought I would give it another go but still not working so have decided to re-post.

I have a template that is retrieving data from mySql and displaying it. However there are a few iframes that come up looking smaller then the others. The iframes have the same width and height as the other iframes, and have the same container divs.

I even tried just to display the one of the iframes elsewhere with the same container div and it displayed it the correct size however I am not sure why it is not displaying it in the template when rendered.

Here is the code for the container div and iframe;

#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;
}

and here is the template code;

<?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 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 of Photography</h2>
      </a>
      <nav>

          <ul>
            <li><a href="index.php" class="selected">About</a></li>
            <li><a href="/portfolio.php">Portfolio</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>';
                }
            ?>

        <div id="role">
            <p>
                <?php
                    echo $doc['role'];
                ?>
            </p>
        </div>



        <div id="prod_desc">
            <p>
                <?php

                    if(is_null($doc['production_credit']) && is_null($doc['description'])){
                        echo $doc['length'];
                    }else if(is_null($doc['length']) && is_null($doc['description'])){
                        echo $doc['production_credit'];
                    }else if(is_null($doc['length']) && is_null($doc['production_credit'])){
                        echo $doc['description'];
                    }else if(is_null($doc['length'])){
                        echo $doc['production_credit'];
                        echo '<br /><br />';
                        echo $doc['description'];
                    }else if(is_null($doc['production_credit'])){
                        echo $doc['length'];
                        echo '<br /><br />';
                        echo $doc['description'];
                    }else if(is_null($doc['description'])){
                        echo $doc['length'];
                        echo '<br /><br />';
                        echo $doc['production_credit'];
                    }else{
                        echo $doc['length'];
                        echo '<br /><br />';
                        echo $doc['production_credit'];
                        echo '<br /><br />';
                        echo $doc['description'];
                        echo '<br /><br />';
                    }

                ?>
            </p>
        </div>



    </div>

     <footer class="main-footer">



        <div id="footer-notes">
          <p>Tom Turner - Director of Photography</p>
          <p>&copy; Tom Turner - All Rights Reserved</p>
        </div>
       <div id="mayur">
          <p>&copy; 2015 Website by <a href="https//:www.mayurpande.com">Mayur Pande</a></p>

        </div>

        <div class="social-media">
          <ul>

              <li><a href="mailto:tom@allritesreversed.co.uk"><img src="img/mail_circle.png" alt="Email Logo" /></a></li>
              <li><a href="https://www.facebook.com/tom.turner.397501?fref=ts"><img src="img/fbcircle.png" alt="Facebook Logo" /></a></li>
              <li><a href="https://vimeo.com/user6107855"><img src="img/vimeo_circle.png" alt="Vimeo Logo" /></a></li>
              <li><a href="https://twitter.com/intent/tweet?screen_name=mayurpandeuk"><img src="img/twitter_circle.png" alt="Twitter Logo" /></a></li>

            </ul>
          </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>

2 Answers

Richard Duffy
Richard Duffy
16,488 Points
Richard Duffy
Richard Duffy
16,488 Points

Hey,

Does it actually return data, or is it not displaying anything. If so, try var_dump on the return data. Also you could try using list items, or a table to display your data.

Regards,

Richard.

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Hi,

Yes it is displaying it, but for some reason a few of them are displaying smaller width and height than the others

Richard Duffy
Richard Duffy
16,488 Points
Richard Duffy
Richard Duffy
16,488 Points

Hey,

I think your problem might be that they have an auto size, so you need to override them to set them to a size that you want, try setting min-height to something like min-height: 500px; and see if that works. Or you could use display: flex; on the parent container and then set align-self: stretch; which means they will stretch the full height of the parents container.

Regards,

Richard.

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Richard Duffy Hi again! thanks for the answer it still seems not to work. When adding the min-height it makes the iframe video stretch out vertically as you would expect but not horizontally which is what is required. As for the align-self: stretch it does not seem to work at all.