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 trial3615internet
8,086 Pointsadding speakers picture in the event list
hi there!
i can't find how to add picture at the beginning of each event line.
as we got ul / li, i looked over https://getbootstrap.com/docs/4.0/layout/media-object/#media-list. I thought i just have to add "list-unstyled" to my ul, "media" to all the li and "media-body" & an img above each div bu it seems it is not the correct solution as the image stacks over the title event :/ does anyone has complete these part of the challenge ?
2 Answers
Steven Parker
231,236 PointsNo "media" classes seemed necessary. I just added the image with a custom class "avatar", and then used custom.css to size it, float it, and give it a round border to look like the video:
<li class="list-group-item">
<img class="mr-3 avatar" src="img/avatar-nodestradamus.png" alt="avatar"> <!-- new -->
<div class="d-flex justify-content-between">
.avatar {
border-radius: 50%;
width: 3rem;
height: 3rem;
float: left;
}
Tomasz Denkiewicz
11,778 Pointswithout adding css class type this
<img class="rounded-circle mr-4 float-left" style="max-width: 3rem;" src="..//speaker thumbnails/avatar-json.png">
Teri Dent
11,515 PointsTeri Dent
11,515 PointsI am having a similar problem.
The thumbnails seem to be huge and I can't figure out how to make them smaller. Something about the size of the parent element...but I can't figure that out either.