Responsive Navbar, jumbotron with text inside

HTML-CSS
1

Hello,
I’m trying to get some parts of Portfolio page to be responsive, but I’m running into some issues.
I forgot there was a community that might be able to help.
Can someone please help me with three issues I’m having?
I know it has to do with my positioning , sizes, etc, but I just can’t figure it out.

Thanks in advance

  1. I’m trying to keep my navbar from going too wide outside my picture when the width passes 1068.
    I put in the following media query but it is not having the affect I want.
    @media (min-width: 1068px) {

    .navbar-wrapper {
    max-width: 20%;
    }
    }

  2. The Jumbtron & the text inside it are also going too wide outside my picture when the width passes 1068

  3. The text inside the jumbotron goes below the jumbtron once the width falls below 929px

Here’s the link to it in codepen

2

Your main problem is that you’re not including the bootstrap libraries in your html file. :stuck_out_tongue: In the exercises, they are automatically included for you, but for the projects, you have to include them before you can use them!

Put these at the top of your html file:

<!--Latest bootstrap stylesheet --> 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

I’m betting this will fix the majority of your issues, and the rest should be easier to figure out! Don’t forget that you may want to take out some of your custom CSS and let Bootstrap do that stuff for you. Good Luck!

3

Thanks Gkleinereva. I’ll give that a try. Sorry for the late reply, but I’ve been busy.