CODEWITHSUNDEEP
htmlcssflexbox
Mathias
Mathias

Reputation: 605

Why does child element "row" not match height of parent element "container"?

Just a quick on in relation to the following site:

christmas.drcrittall.com

My question, is why despite the following CSS:

html, body {

    height:100%;

}

/* Background image for website */ 
body {

    /*background: url("images/crumpled.jpg") no-repeat center center fixed;*/
    background: url("../img/crumpled.jpg") no-repeat;
    background-size: 100% 100%;
    /*margin-bottom:5%;*/                                   

}

#header {

    height:20%;
    border-style: solid; 
    border-color:red;
    /*padding:0px;  */                      

}

#middle {

    height:60%;
    /* border-style: solid; 
    border-color:green;*/

}

#cap {

    height:20%;

    border-style: solid; 
    border-color:blue;
    /* Previously the click here text was overflowing out of this div. See here to see how to deal with this: https://css-tricks.com/almanac/properties/o/overflow/ */
    /*overflow:auto;*/.

}

#form {

    min-height:20%; /* Setting min-height of white-space beneath body enables container to expand with the form as it gets bigger */ 
    display:none;  /* This div is initially hidden until click button which activates jquery animation */


}

#main_image {


    max-width:100%;
    max-height:60vh; /*Set max and min heights to 60vh to lock within this container ie stop images expanding out */
    min-height:60vh;

}

#candle_image {

    width:100%;
    height:100%; 

}

#top_paper {

    width:100%;
    max-height:100%; 


}

/* Make row height and columns fill entire height of containers */

.row, .col-md-6, .col-md-4, .col-md-6, .col-md-12, .col-md-8, .col-md-2, .col-md-3, {

    height:100%; 

}

Does the row within #cap and #head not fill 100% of the height? I have used flex box to center the font within the header, but can not seem to do the same with the cap... Here is the HTML:

<body>
    <div class = "container-fluid center_font" id = "header">
        <div class = "row" style = "border-style: solid; border-color:black;">
            <div class = "col-md-12 col-xs-12">
                <font id = "dear"> Merry Christmas! </font>
            </div>
        </div>
    </div>
    <div class = "container-fluid center_font" id = "middle">
        <div class = "row"><!-- style = "border-style:solid; border-color:black;">-->
            <div class = "col-md-3" id = "holly_1" style = "padding-top:10%;">
                <img src = "../img/candles.png" id = "candle_image" class = "img-fluid">    
            </div>
            <div class = "col-md-6 col-xs-12 center_font"><!-- style = "border-style:solid; border-color:yellow;">-->
                <img src = "" id = "main_image" class = "img-circle">
            </div> 
            <div class = "col-md-3" id = "holly_2" style = "padding-top:10%;">
                <img src = "../img/candles.png" id = "candle_image" class = "img-fluid">    
            </div>
        </div>  
    </div>
    <div class = "container-fluid" id = "cap"><!-- style = "border-style:solid; border-color:green;">-->
        <div class = "row" style = "border-style: solid; border-color:black;">
            <div class = "col-md-offset-3 col-md-6 col-xs-12 center_font">                  
                <font class = "ammend" id = "dear" style = "font-size:45px;"> Love from Matthew</font><br>  
                <!--<a href = "#" id = "reveal">
                    <font id = "dear" class = "fiddle" style = "font-size: 20px;">Click Me</font>
                </a> 
                -->
            </div> 
            <div class = "col-md-offset-3 col-md-6 col-xs-12 center_font">
                <a href = "#" id = "reveal">
                    <font id = "dear" class = "fiddle" style = "font-size: 20px;">Click Me</font>
                </a> 
            </div>
        </div>      
    </div> 
</body>

Upvotes: 0

Views: 74

Answers (1)

Syden
Syden

Reputation: 8625

Font size is too big and collapses the offset columns, and you are missing center_font class on #cap.

  • Add center_font class to #cap.
  • Change font-size from 45px to less or equal than 36px on font#dear.ammend to keep 1 line of text ("Love from Matthew").

Check image

Upvotes: 1

Related Questions