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 Mark Libario
Mark Libario
9,003 Points

Responsive Profile pic image in jumbotron help

Im trying to make the img that I added inside the jumbotron as a profile picture to be placed on the left side.

The image has a default 640 x 640px size.

I tried to create a new css class that would lessen the size of the image to 300x300.

I have the bootstrap class .img-fluid, but my img doesn't change to smaller size when I try to shrink more the browser.

If I remove the img class I made, the whole image will fill up the jumbotron size..

What do I need to do to make my image responsive ?

<!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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"><link rel="stylesheet" href="css/style.css">
  </head>
  <body>

    <!-- Navbar -->
    <ul class="nav ">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
    <!-- /Navbar -->



    <!-- Jumbotron-->
    <div class="jumbotron jumbotron-fluid jumbo-height">
  <div class="container">
    <h1 class="display-3"><strong>JVA Aesthetics </strong></h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>

      <img src="img/optimus.jpg" class="rounded-circle img-size img-fluid">

  </div>


    <!-- /Jumbotron -->




    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <script src="js/app.js"></script>
  </body>
</html>

heres my css aart from the bootstrap4 cs

.jumbo-height {
  min-height: 650px;
  background: linear-gradient(black, transparent 60%),
    url("../img/fit-bg1.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 640px;
  color: #fff;
}

.img-size {
  height: 300px;
 width 300px;
}

I want the img to be smaller when I scale down the browser.

1 Answer

Robbie Thomas
Robbie Thomas
31,093 Points
Robbie Thomas
Robbie Thomas
31,093 Points

If you are viewing your webpage via Internet Explorer, it can cause some display problems as said on the Bootstrap website: https://v4-alpha.getbootstrap.com/content/images/

Try using Google Chrome or a different browser instead and see if it works through there.