Design Prototyping in the Browser Page Layout Defining Content Areas

Posted by Oriana Espinoza
Oriana Espinoza
1,078 Points

I made the styles changes in the 6:21 min and the changes doesn´t apply.

header { padding: 2rem 0; }

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

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

2 Answers

Jack Cummins
Jack Cummins
17,416 Points
Jack Cummins
Jack Cummins
17,416 Points

It must be that you're using a different browser than him.

Jack Cummins
Jack Cummins
17,416 Points
Jack Cummins
Jack Cummins
17,416 Points

Whoops. That actully couldn't be correct.

Gemz Nunn
Gemz Nunn
15,155 Points
Gemz Nunn
Gemz Nunn
15,155 Points

I had the same issue. It turned out I hadn't closed a CSS property correctly, so double-check your code for missing semi-colons.

I also adapted to code slightly to use Bootstrap's spacing (mb-4) rather than creating a new margin-bottom property in .featured, like this:

          <!-- featured -->
        <section class="featured mb-4"> </section><!-- /featured -->

My CSS now looks like this:

.featured {
    height: 500px;
    background: #EEE;
}