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
Courses Plus Student 4,504 PointsWebsite 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
Liam Clarke
19,938 PointsHi 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.
Good luck!
Benjamin Coulombe
Courses Plus Student 4,504 PointsBenjamin Coulombe
Courses Plus Student 4,504 PointsHi 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