Making a photo the full size of its div element within a column. BOOTSTRAP HTML CSS

Question

Hello, I didn't really know how to word this one. But basically, I have a row with two columns in and am working on what it looks like in bigger screen sizes. Due to the original size of the photo, it seemed to not fit the full size of the vp in 1024px. So far, I've used

    #kitchenHome {
        float: right;
    }

to make the columns stay side by side instead of over lapping.

If you open the code given you will see that you can only see the top right corner of the kitchen photo. What I'm aiming to do is make it so that the image stays the full length of the VP, meaning that some of the photo won't be shown on the vp, if that makes sense? if I haven't worded this well enough (because I didn't really know how to say it and still make sense) please just ask for a clarification.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- /Required meta tags -->

    <!-- Links -->
    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i|Lobster|Roboto:300,300i,400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="customRespon.css">
    <!-- /Links -->

    <title>text</title>

</head>

<body>
    <nav id="mainNav" class="navbar">
        <span class="navbar lobster ppt" id="titleLogo">pantri</span>
        <span><i class="navbar pgt material-icons">menu</i></span>
    </nav>
            <div class="spacer">&nbsp;</div>
    <div class="row justify-content-md-center">
        <div id="imageContent" class="col-xs-12 col-lg-8">
            <img src="Kitchen.png" alt="Kitchen Photo" id="kitchenHome">
        </div>
        <div id="homeContent" class="col-lg-4">
            <h1 class=" Libre bakerville ppt text-center">text text text text text text text text text text text text text text</h1>
            <p class="pgt">text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text
                <br>
                <br> text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text
                <br>
                <br>text text text text text text text text text text text text text text text text text text text text text text text text text
                <br>
                <br> text text text text text text text text text text text.</p>
            <button type="button" class="btn btn-primary px-4 py-2 center-block">text text text</button>
        </div>
    </div>
</body>

</html>

css

/* Body */

#mainNav {
    width: 100%;
    height: 3.5em;
    background-color: white;
    position: fixed;
    top: 0em;
    left: 0em;
    z-index: 1;
    padding: 1em;
    box-shadow: 0em 0.5em 1em rgba(0, 0, 0, 0.23);
}

.row {
    margin: 0;
}

#imageContent {
    padding: 0;
}


/* Text */

.lobster {
    font-family: 'Lobster', cursive;
}

h1 {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.3em;
    line-height: 1.5em;
    -webkit-margin-after: 1em;
}

p {
    font-family: 'Roboto', sans-serif;
    text-align: justify;
    font-size: 1em;
    -webkit-margin-before: 0em;
    font-weight: 300;
    margin-bottom: 1em;
}

#homeContent {
    padding: 1.5em 1em 1em 1em;
}

#titleLogo {
    font-size: 1.4em;
}


/* Colour */

.ppt {
    /* pantri purple text */
    color: #5b4495;
}

.ppb {
    /* background */
    background: #5b4495;
}

.pgt {
    /* pantri grey text */
    color: #777;
}

.pgb {
    /* background */
    background: #565656;
}


/* Button */

.btn {
    height: 3em;
    padding: 0em 0.55em 0em 0.55em;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.2em;
    border-radius: 0.125em;
    box-shadow: 0em 0.125em 0.25em rgba(0, 0, 0, 0.23);
}

.btn-primary {
    background-color: #5b4495;
    border: #5b4495;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    color: #5b4495;
    background-color: white;
    border: white;
    box-shadow: 0em 0.5em 1em rgba(0, 0, 0, 0.23);
}

.btn-info {
    background-color: #565656;
    border: #565656;
}


/* Media Queries */

@media (max-width: 991px) {
    #kitchenHome {
        width: 100%;
    }
}

@media (min-width: 576px) {
    #titleLogo {
        font-size: 2em;
    }
    /* text */
    h1 {
        font-size: 2em;
    }
    p {
        font-size: 1.2em;
    }
    .btn-primary {
        font-size: 1.3em;
    }
}

@media (min-width: 992px) {
    /* text */
    h1 {
        font-size: 1.8em;
    }
    p {
        font-size: 1.1em;
    }
    #titleLogo {
        font-size: 1.7em;
    }
    /* button */
    .btn-primary {
        font-size: 1em;
    }
    /* body */
    .spacer {
        width: 100%;
        height: 3.5em;
    }
    #imageContent {
        height: 100%;
    }
    #kitchenHome {
        float: right;
    }
    .row {
        height: 100%;
        width: 100%;
        margin: 0;
    }
}

@media (min-width: 1024px) {
    /* text */
    #titleLogo {
        font-size: 2em;
    }
    h1 {
        font-size: 1.2em;
    }
    p {
        font-size: 0.9em;
    }
    .btn-primary {
        font-size: 1em;
    }
}

@media (min-width: 2560px) {
    /* text */
    h1 {
        font-size: 2.8em;
    }
    p {
        font-size: 1.6em;
    }
    #titleLogo {
        font-size: 2.9em;
    }
    .material-icons {
        font-size: 3em;
    }
    /* button */
    .btn-primary {
        font-size: 1.4em;
    }
}

Answer 1 · 2017-09-27T08:45:52Z

September 27, 2017 8:45am

Hello, from your problem that you want the image to be 100% height according to the size of the image. Well I do think you should use background image instead of image HTML element. I hope this helps. :)

Answer 2 · 2017-09-25T20:17:01Z

September 25, 2017 8:17pm

Hi Emily,

I'm not sure what you mean by "VP"?, but will try to provide some further info that could help, these classes already exist in Bootstrap 4 as well so will included links to them as you may find some of the other helper classes useful :)

To make the image responsive, you can add class="img-fluid" to the kitchen image element.

https://v4-alpha.getbootstrap.com/content/images/#responsive-images

This will the play nicely and the text will not overlap. If you want to make the image take up the full width of the container you can add another class, like w-100 to the image.

https://v4-alpha.getbootstrap.com/utilities/sizing/

Hope this helps,

Martin

Welcome to the Treehouse Community

Looking to learn something new?

Emily Easton

Emily Easton

Making a photo the full size of its div element within a column. BOOTSTRAP HTML CSS

2 Answers

Frans Teja

Frans Teja

martinjones1

martinjones1

Emily Easton

Emily Easton