Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Benjamin Coulombe
PLUS
Benjamin Coulombe
Courses Plus Student 4,504 Points

Website carousel images not resizing for smaller screens

Hello,

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>

    </div>
  </div>
</div>
<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>
<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>
</a>

</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; }

slider

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

thank you

Ben

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

Ben