My website showcases screenshots of my software in a div element. Everything looks great on larger screens, but once I switch to a phone or resize the window, the images don't align properly, leaving empty space. Refer to the image below for clarification.
https://i.stack.imgur.com/F4Dnc.png
Below is the code from the index page. I believe it should work without any modifications.
Here are some things that I have tried: - Removing the container and row classes. - Adjusting the width of the images down to 80% (even though 100% should work). - Adding class="img-responsive" as suggested in another thread. - Removing margins and padding for the divs containing the images.
<!-- Screenshots -->
<div id="screenshots">
<div class="container">
<br>
<div class="row text-center"> <!-- Screenshot DIV -->
<h2>Screenshots</h2>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/dashboard.png" alt="Dashboard SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/lotmanager.png" alt="Lot Manager SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/register.png" alt="Register SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/sell.png" alt="Auction SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/checkout.png" alt="Checkout SS" class="img-responsive" width="100%"/>
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/samplereceipt.png" alt="Receipt SS" class="img-responsive" width="100%" />
</div>
</div><!-- /.Screenshot DIV -->
<br>
</div><!-- /.container -->
</div><!-- /.screenshots -->
I would appreciate any help with this issue.