My images aren't responsive on mobile! [SOLVED]

So, I’ve been trying so many things to fix this, and I’m not sure what I’m doing wrong here. It looks real nice on a desktop, but mobile looks awful… Please do help, and post suggestions. Thank you. Also here is what it looks like on mobile: http://mobt.me/WsHx

<!DOCTYPE html>
<html>
<head>
  <title>Trent Norris</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css.css" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  body {
      position: relative; 
  }
  #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1c2aef;}
  #section2 {padding-top:50px;height:500px;color: #fff; background-color: black;}
  #section3 {padding-top:50px;height:500px;color: #fff; background-color: #1c2aef;}
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">TrentNorris.TK</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Trent Norris</a></li>
          <li><a href="#section2">About Me</a></li>
          <li><a href="#section3">My Portfolio</a></li>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>  

<center>

<div id="section1" class="container-fluid">
  <h1>Trent Norris</h1>
  <h2>Novice at HTML/CSS</h2>
  <h3>In the future, I plan to learn PHP, Python, Java, and C.</h3>
  <img class="img lg-image" src="/placeholderperson.png" alt="My placeholder for my photo!">
</div>
<div id="section2" class="container-fluid">
  <h1>About Me</h1>
  <p>My name is Trent Norris, I'm (age) from the US. The reason for this site is to display my projects, and my portfolio for the future.</p>
  <p>I'm learning HTML5 and CSS3; next I will be learning PHP.</p>
  <div class="img-responsive col-xs-12">
  <img src="html5.png"/>
  <img src="css3.png"/>
  </div>
</div>
<div id="section3" class="container-fluid">
  <h1>Portfolio</h1>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</div>
</center>

Might be because you put the “img-responsive” class in the div instead of the actual images.

Nope, didn’t work for me.

What is your exact problem with the images?
Too big on mobile?

Yes, and they are not in the right place. You can view it on mobile here: http://mobt.me/WsHx

Where do you want them to be, side by side?

Yes, and to be responsive to mobile devices.

<div class="row">
  <div class="col-xs-6">
<img src="html5.png" class="img-responsive">
</div>

  <div class="col-xs-6">
<img src="css3.png" class="img-responsive">
</div>
  </div>

Try this

IT WORKED! However, my desktop version now looks weird like this: http://prntscr.com/ebuyqk

Ok, I did that by adding a “row” class div to your columns.

How do you want it to look on a desktop?

I want it to to look the same as mobile, close to each other and next to each other.

Weird, for me, they are side by side and big. What browser are you using?

Did you replace this:

<div class="img-responsive col-xs-12">
<img src="html5.png"/>
<img src="css3.png"/>
</div>

With this:

<div class="row">
  <div class="col-xs-6">
<img src="html5.png" class="img-responsive">
</div>

  <div class="col-xs-6">
<img src="css3.png" class="img-responsive">
</div>
  </div>

Chrome, 100% Zoom, are you zoomed in or something?

I replaced that, and it fixed the mobile problem, but on the desktop it looks weird now.

Try adding some inline-css
play around with the max-width.

<img src="css3.png" class="img-responsive" style="max-width:[Percentage here.]">

Oh, also in your css

.img-responsive {
    display: block important;
    max-width: 100% important;
    height: auto important;
}

You didn’t add the exclaimation marks in front of the important keyword

.img-responsive {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

although I’m assuming you tried this to fix the images

Fixed the !important thing, but playing with max-width didn’t help it.

I have a question about that as well.
If I use

My div will adapt to different devices?

<div class"col-xs-6 col-md-6 col-lg-6">