Unwanted CSS white space

Asked

Viewed 4,974 times

1

I’m doing a booking site for outdoor activities and I’m having a problem with CSS.

In my document there is always a blank part below the image, I do not understand why. In Chrome dev tools nothing significant appears, I can’t figure out this problem.

And another thing: in the comments, I would like that when someone makes a comment, not to hurt the layout of the page, I would like the comment area to have a scroll, as I do this?

Follow the code below:

HTML:

<?php
//inclui a BD
include('ligar_bd.php');

session_start();

 $no_session ="";

//id da atividade onde agarra atraves do URL
  $id_activity = $_GET['id'];
  // quero para mostrar toda a informação da atividade para depois estar predefenida no formulario
  //para puder mudar
  $sql = $db->prepare(" SELECT * FROM `Activity` where idActivity = :id ");

  $sql->bindParam(':id', $id_activity);

  $sql->execute();

  $row = $sql->fetchAll(PDO::FETCH_ASSOC);

      if(isset($_POST['commentary'])){

        if(isset($_SESSION['user'])){

          $id_activity = $_GET['id'];


          $user_id = $_SESSION['user']['idUser'];


          $comment = $_POST['comment'];


          $date = date('y-m-d');

            $comment = htmlspecialchars($comment, ENT_QUOTES, 'UTF-8');

            $sql = $db->prepare(" INSERT INTO `Comment` (`idActivity`,`idUser`, `comment`,`date`)
            VALUES (:idActivity,:idUser,:comment,:date)");

            //bind dos parametros, isto para evitar mysql injection
            $sql->bindParam(':idActivity', $id_activity);
            $sql->bindParam(':idUser', $user_id);
            $sql->bindParam(':comment', $comment);
            $sql->bindParam(':date', $date);

            //Executa a query que predefenimos
            $sql->execute();

            $count = $sql->rowCount();

            if ($count > 0){

            $success = "Comment done";

            }else {

             $error_comment = "error on inserting comment";

             var_dump($error_comment);

            }

        }else{

            $no_session = "To make a comment you need to be logged in first";

        }

    }


?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/Grid.css">
        <link rel="stylesheet" type="text/css" href="css/activity.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
        <title>Adventure</title> 
    </head>



    <body>

        <!-----------HEADER-------------------->
        <header>
            <nav>
            <div class="row">   
                <ul class="main-title">
                <li><h2><?php echo $row[0]['title'];?></h2></li>
                </ul>
            </div> 
            </nav>
        </header>






        <!-------------SECTION LIST-------------->


        <section class="section-post" id="post">


            <div class="row">
                <div class="col span-1-of-2">
                <div class="post-img">
                        <img src="img/hero.jpg">
                    </div>
            </div>

                <div class="col span-1-of-2">


                    <!-- Open The Modal -->
                    <?php
                        echo
                        '
                         <a href="checkout.php?Activity&id='.$row[0]['idActivity'].'"><button class="btn-reservation">Make Reservation</button></a>
                        ';
                    ?>


                    <div class="description">
                        <p><?php echo $row[0]['description'] ?></p></p>
                    </div>

                    <div class="social">
                        <h3>Share with your friends</h3>
                    <ul class="social-icons">
                        <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
                    </ul>
                    </div>    



                    <!----COMMENTS-->
                    <ul class="comment-section">


                    <?php 

                      //query para listar as atividades
                      $sql = $db->prepare(" SELECT * FROM `Comment` where `idActivity` = :idActivity ");

                      $sql->bindParam(':idActivity', $id_activity);

                      $sql->execute();

                      $row = $sql->fetchAll(PDO::FETCH_ASSOC);

                      //para cada atividade uso o foreach para 
                      foreach( $row as $value){

                       $id_user = $value['idUser'];

                         $sql = $db->prepare(" SELECT username FROM `user` where `idUser` = :id ");

                         $sql->bindParam(':id', $id_user);

                         $sql->execute();

                         $dados = $sql->fetchAll(PDO::FETCH_ASSOC);


                        echo
                        '


                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">'.$dados[0]['username'].'</a>
                        <span>'.$value['date'].'</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="img/avatar_author.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>'.$value['comment'].'</p>

                        </li>

                        ';
                      }
                        ?>


                        <li class="write-new">

                            <form  method="POST">

                                <textarea placeholder="Write your comment here" name="comment"></textarea>

                                <div>
                                    <input class="btn-submit" type="submit" name="commentary" value="submit">
                                </div>
                                <?php echo $no_session ?>
                            </form>

                        </li>

                    </ul>

                </div> 
                    </div>

        </section>



        <!---SECTION 8 FOOTER--->
    <footer>


        </footer>

    </body>


</html>

CSS:

* ---------------------------------------------- */
/* BASIC SETUP */
/* ---------------------------------------------- */

/* Isto deve fazer-se sempre para remover qualquer margem, padding, etc */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
}


/* SCROLLBAR */

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #27ae60; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #219251; 
}



/* Selecinar cor, fontes e tamanhos padrão para todo o documento html */
html,
body {
    background-color: #fff;
    color: #555;
    font-family: "Lato";
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /*isto esconde tudo o que va para alem do eixo x*/
}







/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */


.row {
    max-width: 1140px;
    margin: 0 auto;
}


/*Espaço em branco em todas as seccoes*/
section {
    padding: 80px 0;
}


/*-----HEADLINE/TITULOS-----*/


h1, h2, h3 {
    font-weight: 300;
    text-transform: uppercase;
}

h1 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 240%;
    word-spacing: 4px;
    letter-spacing: 1px;
}

h2 {
    font-size: 180%;
    word-spacing: 2px;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

h3 {
    font-size: 110%;
    font-weight: 400;
    margin-bottom: 15px;
}






/*-----LINKS-----*/

a:link,
a:visited {
    color: #00BFFF;
    text-decoration: none;
    padding-bottom: 1px;
    -webkit-transition: border-bottom 0.2s, border 0.2s, color 0.2s;
    transition:  border 0.2s, color 0.2s;
}

a:hover,
a:active {
    color: #555;
    border-bottom: 1px solid transparent;
}


/* ----------------------------------------------------------------------------------------------------- */





/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */

/* 100vh = 100% viewport */
header {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(64, 110, 142, 0.70)), to(rgba(0, 0, 0, 0.70))), url(img/tumblr_ng88k4nD8U1tv1qiho1_1280.gif);
    background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/tumblr_ng88k4nD8U1tv1qiho1_1280.gif);
    background-size: cover;
    background-position: center;
    height: 27vh;
    background-attachment: fixed;
}




/*-----post----*/
.main-title {
    float: left;
    margin-top: 55px;
    list-style-type: none;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.157);
}

.main-title li h2 {
    display: inline;
    margin: 40px;
    padding: 8px 0;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    list-style: none;
    font-size: 220%;
    font-weight: 300;
    letter-spacing: 2px;
}





/* ---------------------------------------------- */
/* LIST */
/* ---------------------------------------------- */


.post-img {
    margin: -16.3% 0 0 -20%;;
}

.post-img img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.description {
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
}


.description p {
    font-size: 80%;
    text-align: justify;
    line-height: 25px;
    letter-spacing: 1px;
    word-spacing: 1px;
}





.btn-reservation {
    width: 100%;
    height: 50px;
    float: right;
    border: 0;
    margin-top: -13%;
    font-size: 100%;
    font-weight: none;
    color: #fff;
    cursor: pointer;
    background-color: #27ae60;
    transition: background-color 0.2s;
    }

.btn-reservation:hover {
    background-color: #219251;
    }







    /* COMMENTS */

    .comment-section{
        margin-top: 10%;
        list-style: none;
        width: 100%;
    }

    .comment{
        width: 100%;
        display: flex;
        margin-bottom: 45px;
        flex-wrap: wrap;
    }

    .comment.user-comment{
        color:  #808080;
    }

    .comment.author-comment{
        color:  #60686d;
        justify-content: flex-end;
    }


    .comment .info{
        width: 17%;
    }

    .comment.user-comment .info{
        text-align: left;
    }

    .comment.author-comment .info{
        order: 3;
    }


    .comment .info a{   /* User name */
        display: block;
        text-decoration: none;
        color: #656c71;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding: 10px 0 3px 0;
    }

    .comment .info span{    /* Time */
        font-size: 11px;
        color:  #9ca7af;
    }



    .comment .avatar{
        width: 8%;
    }

    .comment.user-comment .avatar{
        padding: 10px 18px 0 3px;
    }

    .comment.author-comment .avatar{
        order: 2;
        padding: 10px 3px 0 18px;
    }

    .comment .avatar img{
        display: block;
    }

    .comment.user-comment .avatar img{
        float: right;
    }





    /* comment */

    .comment p{
        width: 100%;
        line-height: 1.5;
        padding: 18px 22px;
        width: 50%;
        position: relative;
        word-wrap: break-word;
    }

    .comment.user-comment p{
        background-color:  #f3f3f3;
    }

    .comment.author-comment p{
        background-color:  #e2f8ff;
        order: 1;
    }

    .user-comment p:after{
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #ffffff;
        border: 2px solid #f3f3f3;
        left: -8px;
        top: 18px;
    }

    .author-comment p:after{
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #ffffff;
        border: 2px solid #e2f8ff;
        right: -8px;
        top: 18px;
    }




    /* Comment form */

    .write-new{
        width: 93%;
    }

    .write-new textarea{
        color:  #444;
        font: inherit;

        outline: 0;
        border: 1px solid #cecece;
        background-color:  #fefefe;
        overflow: auto;
        width:100%;
        min-height: 80px;
        padding: 15px 20px;
    }

    .write-new img{
        margin-top: 15px;
    }




    @media (max-width: 800px){

        .comment p{
            width: 100%;
        }

        .comment.user-comment .info{
            order: 3;
            text-align: left;
        }

        .comment.user-comment .avatar{
            order: 2;
        }

        .comment.user-comment p{
            order: 1;
        }


        .comment.author-comment{
            justify-content: flex-start;
        }


        .comment-section{
            margin-top: 10px;
        }

        .comment .info{
            width: auto;
        }

        .comment .info a{
            padding-top: 15px;
        }

        .comment.user-comment .avatar,
        .comment.author-comment .avatar{
            padding: 15px 10px 0 18px;
            width: auto;
        }

        .comment.user-comment p:after,
        .comment.author-comment p:after{
            width: 12px;
            height: 12px;
            top: initial;
            left: 28px;
        }

        .write-new{
            width: 100%;
        }
    }


    input {
        padding: 0;
        border: none;
        font: inherit;
        color: inherit;
        cursor: pointer;
      }





/* modal */


.modal-body {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #219251;
    opacity: 0;
}

.modal-body:target {
    opacity: 1;
}




.btn-submit {
    height: 40px;
    width: 40%;
    font-family: "lato";
    font-weight: 300;
    margin-left: 68.5%;
    margin-top: 10px;
    font-size: 100%;
    text-transform: capitalize;
    cursor: pointer;
    float: left;
    color: #fff;
    background-color: #27ae60;
    transition: background-color 0.2s;
}


.btn-submit:hover {
    background-color: #219251;

}






/* Icons */ 

.social {
    margin-top: 5%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
}

ul {
    padding:0;
    list-style: none;
}
.social-icon {
    color: #fff;
}
ul.social-icons {
    margin-top: 10px;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}
.fa-facebook {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    color: #fff;
    background-color: #27ae60;
}
.fa-facebook:hover {
    background-color: #219251;
    color: #fff;
}
.fa-twitter {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-twitter:hover {
    background-color: #219251;
    color: #fff;
}
.fa-rss {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-rss:hover {
    background-color: #219251;
    color: #fff;
}

.fa-linkedin {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-linkedin:hover {
    background-color: #219251;
    color: #fff;
}
.fa-google-plus {
    padding:20px 20px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-google-plus:hover {
    background-color: #219251;
    color: #fff;
}



/* ---------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------- */

footer {
   background-color: #333;
    padding:30px; 
    font-size: 80%;

This is what appears, this blank, the image is 100vh. And I’d like to know how I do the comment zone with scroll, because when I tried it, it bugged a little.

inserir a descrição da imagem aqui

html css grid align

  • Do you have a link for us to access the site or is it just running there locally?

  • it is running locally same...

  • And you want the image to go to the darkest part just below?

  • That margin -16.3% image is for it stays on the previous content?

  • is yes to stay on the previous content. Yes @hugocsl I want the image to go to The dark part underneath.

2 answers

2


What is generating this blank space is the property padding in section:

/*Espaço em branco em todas as seccoes*/
section {
    padding: 80px 0;
}

What you can do is remove this padding only in the post with :not(classe da section), if the others really need this padding:

section:not(.section-post) {
    padding: 80px 0;
}

The height of the .row that stores image and comments Ivs, reducing the height by the negative margin of the image:

<div class="row" style="height: calc(100vh - 16.3%)">

And in the .col comments also reduce the height on 90px:

<div class="col span-1-of-2" style="height: calc(100vh - 90px);">

To make the comment zone with automatic scroll, adjust the height height (also reducing to fit in .row) and also put overflow in class .comment-section:

.comment-section{
  margin-top: 10%;
  list-style: none;
  width: 100%;
  overflow: hidden auto;
  height: calc(100% - 250px);
}

At the end it will look just like in this example (I put a red background in the comments column to illustrate). Run in full screen:

* ---------------------------------------------- */
/* BASIC SETUP */
/* ---------------------------------------------- */

/* Isto deve fazer-se sempre para remover qualquer margem, padding, etc */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
}


/* SCROLLBAR */

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #27ae60; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #219251; 
}



/* Selecinar cor, fontes e tamanhos padrão para todo o documento html */
html,
body {
    background-color: #fff;
    color: #555;
    font-family: "Lato";
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /*isto esconde tudo o que va para alem do eixo x*/
}







/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */


.row {
    max-width: 1140px;
    margin: 0 auto;
}


/*Espaço em branco em todas as seccoes*/
section:not(.section-post) {
    padding: 80px 0;
}


/*-----HEADLINE/TITULOS-----*/


h1, h2, h3 {
    font-weight: 300;
    text-transform: uppercase;
}

h1 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 240%;
    word-spacing: 4px;
    letter-spacing: 1px;
}

h2 {
    font-size: 180%;
    word-spacing: 2px;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

h3 {
    font-size: 110%;
    font-weight: 400;
    margin-bottom: 15px;
}






/*-----LINKS-----*/

a:link,
a:visited {
    color: #00BFFF;
    text-decoration: none;
    padding-bottom: 1px;
    -webkit-transition: border-bottom 0.2s, border 0.2s, color 0.2s;
    transition:  border 0.2s, color 0.2s;
}

a:hover,
a:active {
    color: #555;
    border-bottom: 1px solid transparent;
}


/* ----------------------------------------------------------------------------------------------------- */





/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */

/* 100vh = 100% viewport */
header {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(64, 110, 142, 0.70)), to(rgba(0, 0, 0, 0.70))), url(img/tumblr_ng88k4nD8U1tv1qiho1_1280.gif);
    background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/tumblr_ng88k4nD8U1tv1qiho1_1280.gif);
    background-size: cover;
    background-position: center;
    height: 27vh;
    background-attachment: fixed;
}




/*-----post----*/
.main-title {
    float: left;
    margin-top: 55px;
    list-style-type: none;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.157);
}

.main-title li h2 {
    display: inline;
    margin: 40px;
    padding: 8px 0;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    list-style: none;
    font-size: 220%;
    font-weight: 300;
    letter-spacing: 2px;
}





/* ---------------------------------------------- */
/* LIST */
/* ---------------------------------------------- */


.post-img {
    margin: -16.3% 0 0 -20%;;
}

.post-img img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.description {
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
}


.description p {
    font-size: 80%;
    text-align: justify;
    line-height: 25px;
    letter-spacing: 1px;
    word-spacing: 1px;
}





.btn-reservation {
    width: 100%;
    height: 50px;
    float: right;
    border: 0;
    margin-top: -13%;
    font-size: 100%;
    font-weight: none;
    color: #fff;
    cursor: pointer;
    background-color: #27ae60;
    transition: background-color 0.2s;
    }

.btn-reservation:hover {
    background-color: #219251;
    }







    /* COMMENTS */

.comment-section{
  margin-top: 10%;
  list-style: none;
  width: 100%;
  overflow: hidden auto;
  height: calc(100% - 250px);
}

    .comment{
        width: 100%;
        display: flex;
        margin-bottom: 45px;
        flex-wrap: wrap;
    }

    .comment.user-comment{
        color:  #808080;
    }

    .comment.author-comment{
        color:  #60686d;
        justify-content: flex-end;
    }


    .comment .info{
        width: 17%;
    }

    .comment.user-comment .info{
        text-align: left;
    }

    .comment.author-comment .info{
        order: 3;
    }


    .comment .info a{   /* User name */
        display: block;
        text-decoration: none;
        color: #656c71;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding: 10px 0 3px 0;
    }

    .comment .info span{    /* Time */
        font-size: 11px;
        color:  #9ca7af;
    }



    .comment .avatar{
        width: 8%;
    }

    .comment.user-comment .avatar{
        padding: 10px 18px 0 3px;
    }

    .comment.author-comment .avatar{
        order: 2;
        padding: 10px 3px 0 18px;
    }

    .comment .avatar img{
        display: block;
    }

    .comment.user-comment .avatar img{
        float: right;
    }





    /* comment */

    .comment p{
        width: 100%;
        line-height: 1.5;
        padding: 18px 22px;
        width: 50%;
        position: relative;
        word-wrap: break-word;
    }

    .comment.user-comment p{
        background-color:  #f3f3f3;
    }

    .comment.author-comment p{
        background-color:  #e2f8ff;
        order: 1;
    }

    .user-comment p:after{
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #ffffff;
        border: 2px solid #f3f3f3;
        left: -8px;
        top: 18px;
    }

    .author-comment p:after{
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #ffffff;
        border: 2px solid #e2f8ff;
        right: -8px;
        top: 18px;
    }




    /* Comment form */

    .write-new{
        width: 93%;
    }

    .write-new textarea{
        color:  #444;
        font: inherit;

        outline: 0;
        border: 1px solid #cecece;
        background-color:  #fefefe;
        overflow: auto;
        width:100%;
        min-height: 80px;
        padding: 15px 20px;
    }

    .write-new img{
        margin-top: 15px;
    }




    @media (max-width: 800px){

        .comment p{
            width: 100%;
        }

        .comment.user-comment .info{
            order: 3;
            text-align: left;
        }

        .comment.user-comment .avatar{
            order: 2;
        }

        .comment.user-comment p{
            order: 1;
        }


        .comment.author-comment{
            justify-content: flex-start;
        }


        .comment-section{
            margin-top: 10px;
        }

        .comment .info{
            width: auto;
        }

        .comment .info a{
            padding-top: 15px;
        }

        .comment.user-comment .avatar,
        .comment.author-comment .avatar{
            padding: 15px 10px 0 18px;
            width: auto;
        }

        .comment.user-comment p:after,
        .comment.author-comment p:after{
            width: 12px;
            height: 12px;
            top: initial;
            left: 28px;
        }

        .write-new{
            width: 100%;
        }
    }


    input {
        padding: 0;
        border: none;
        font: inherit;
        color: inherit;
        cursor: pointer;
      }





/* modal */


.modal-body {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #219251;
    opacity: 0;
}

.modal-body:target {
    opacity: 1;
}




.btn-submit {
    height: 40px;
    width: 40%;
    font-family: "lato";
    font-weight: 300;
    margin-left: 68.5%;
    margin-top: 10px;
    font-size: 100%;
    text-transform: capitalize;
    cursor: pointer;
    float: left;
    color: #fff;
    background-color: #27ae60;
    transition: background-color 0.2s;
}


.btn-submit:hover {
    background-color: #219251;

}






/* Icons */ 

.social {
    margin-top: 5%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
}

ul {
    padding:0;
    list-style: none;
}
.social-icon {
    color: #fff;
}
ul.social-icons {
    margin-top: 10px;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}
.fa-facebook {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    color: #fff;
    background-color: #27ae60;
}
.fa-facebook:hover {
    background-color: #219251;
    color: #fff;
}
.fa-twitter {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-twitter:hover {
    background-color: #219251;
    color: #fff;
}
.fa-rss {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-rss:hover {
    background-color: #219251;
    color: #fff;
}

.fa-linkedin {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-linkedin:hover {
    background-color: #219251;
    color: #fff;
}
.fa-google-plus {
    padding:20px 20px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-google-plus:hover {
    background-color: #219251;
    color: #fff;
}



/* ---------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------- */

footer {
   background-color: #333;
    padding:30px; 
    font-size: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<!-----------HEADER-------------------->
        <header>
            <nav>
            <div class="row">   
                <ul class="main-title">
                <li><h2><?php echo $row[0]['title'];?></h2></li>
                </ul>
            </div> 
            </nav>
        </header>






        <!-------------SECTION LIST-------------->


        <section class="section-post" id="post">


            <div class="row" style="height: calc(100vh - 16.3%)">
                <div class="col span-1-of-2">
                <div class="post-img">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
                    </div>
            </div>

                <div class="col span-1-of-2" style="height: calc(100vh - 90px); background: red;">


                    <!-- Open The Modal -->
                         <a href="checkout.php?Activity&id='.$row[0]['idActivity'].'"><button class="btn-reservation">Make Reservation</button></a>


                    <div class="description">
                        <p><?php echo $row[0]['description'] ?></p></p>
                    </div>

                    <div class="social">
                        <h3>Share with your friends</h3>
                    <ul class="social-icons">
                        <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
                    </ul>
                    </div>    



                    <!----COMMENTS-->
                    <ul class="comment-section">


                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">Usuário</a>
                        <span>10/11/2018</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>comentário</p>

                        </li>
                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">Usuário</a>
                        <span>10/11/2018</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>comentário</p>

                        </li>
                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">Usuário</a>
                        <span>10/11/2018</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>comentário</p>

                        </li>
                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">Usuário</a>
                        <span>10/11/2018</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>comentário</p>

                        </li>
                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">Usuário</a>
                        <span>10/11/2018</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>comentário</p>

                        </li>

                        <li class="write-new">

                            <form  method="POST">

                                <textarea placeholder="Write your comment here" name="comment"></textarea>

                                <div>
                                    <input class="btn-submit" type="submit" name="commentary" value="submit">
                                </div>
                                <?php echo $no_session ?>
                            </form>

                        </li>

                    </ul>

                </div> 
                    </div>

        </section>



        <!---SECTION 8 FOOTER--->
    <footer>


        </footer>

  • Excellent, thank you very much. But, when the activity description is a little larger, the comments section exits the page, as shown in the image: https://imgur.com/a/KCiGowf

  • It is. I believe that this adjustment should be done via JS, since the CSS does not have a way to dynamically calculate the height to be reduced in the calc.

1

use the command in the image div and the command in the image height: 100%

I was having the same problem on my web-site at a time, I decided by applying this command.

Browser other questions tagged html css grid align

You are not signed in. Login or sign up in order to post.