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

Design Prototyping in the Browser Page Layout Defining Content Areas

Phoebe Tyson
Phoebe Tyson
7,504 Points
Posted by Phoebe Tyson
Phoebe Tyson
7,504 Points

Name and location display under the picture and not side by side.

I have followed along with the code in the video, but my name is showing underneath my photo. I have tried changing the sizes of both the text and the photo in case it was that they just don't fit side by side on my screen size but they still display underneath. Here is the code and CSS.

            <section class="row">
                <div class="col-lg-4 profile-info">
                    <img class="float-left" src="phoebe-tyson.jpeg" alt="Photograph of Phoebe Tyson">
                    <h2>Phoebe Tyson</h2>
                    <p class="text-muted">Valencia, Spain</p>
                </div>
                <div class="col-lg-5">
                    <p>Hi, I'm Phoebe, a self-taught, aspiring Front-End Developer looking for a Intern/ Junior position in your company!</p>
                </div>
                <div class="col-lg-3">
                    <p><a class="btn btn-block btn-primary" href="#">Send Message</a></p>
                </div>
            </section>

header {
    padding: 2rem 0;
}

.featured {
    height: 500px;
    background: #F99;
    margin-bottom: 2rem;

}

.profile-info img {
    max-width: 6rem;
    max-height: 6rem;
    border-radius: 1rem;
}

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I tried this code and the photo and text appeared side-by-side.

Check that you're using the same major version of Bootstrap as the course (4). One of my gripes with Bootstrap is that new versions are never back-compatible, so if you are using the current one that would explain the issue.

FYI: I was testing with https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css.