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


Benjamin Coulombe
Benjamin Coulombe
Courses Plus Student 4,504 Points

Website carousel images not resizing for smaller screens


I'm putting together my first website project, I created a carousel of images that are not resizing for smaller mobile devices, can someone please look at my code and see what I doing incorrectly?

Github repository link - https://github.com/Ben-Coulombe/LogisticsProj1

HTML code -

<!--- Slider --->

<div id="slider"> <div class="bd-example"> <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="http://www.greenbandco.com/wp-content/uploads/vehicle-tracking-system-installation.jpg" class="mh-100" style="width: 1200px; height: 500px;" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>New VR Bike</h5> <p>Really cool image</p> </div> </div> <div class="carousel-item"> <img src="https://intrigosys.com/wp-content/uploads/2018/04/IOT.png" class="mh-100" style="width: 1200px; height: 500px;" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Another cool image of Tron</h5> <p>Super dope image</p> </div> </div> <div class="carousel-item"> <img src="https://uploads.pl-internal.com/OGRlMTA2ZTMtNjBjOS00NTgyLTljMjUtYzE1NmVlOTdiMGMx/content/2019/02/BHRE_Blog_SelfDrivingCar.jpg" class="mh-100" style="width:1200px; height: 500px; alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Another cool VR image</h5> <p>VR is so dope.</p>

<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>

</div> </div>

CSS code -

carousel-item active {

display: flex; width: 500px; }

carousel-item {

flex-basis: 120px; border: 3px solid rgba(0,0,0,.2); }

.carousel-item { flex-shrink: 1; }

.carousel-item { flex-shrink: 2; }


{ width: 100%; } .carousel-caption { top: 50%; transform: translateY(-50%); bottom: initial!important; } .carousel-caption h5 { color: #ffffff; font-size: 42px; }

thank you


1 Answer

Hi Ben

Why are you using a markdown file for this? Add your markup to a HTML file. For example: index.html for your homepage.

As for image resizing on smaller screens, you can do this with media queries. again this should be in a styling file type. For example: main.css

As for responsive images, its generally a good idea to avoid explicitly setting the size with pixels. Use a dynamic measurement like percentage. To preserve the image aspect ratio make sure you have one of the axis to auto. For example if i had an image 16:9 that i wanted to extend to its full width.

.carousel__image {
    width: auto;
    height: auto;
    max-width: 100%;

If your using a full width image, personally i prefer to use a background image for more control on responsive behaviours.

find out more

Good luck!

Benjamin Coulombe
Benjamin Coulombe
Courses Plus Student 4,504 Points

Hi Liam,

Thank you for the info changing it to background image gave me more control on the image!

Regarding the markdown file vs adding the markup to the HTML file I'm still learning so I don't know why I did what I did so I also appreciate that advice as well!

Thank you