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

Java Spring Basics Using the MVC Architecture Code Two More Thymeleaf Templates

Posted by Iver Band
Iver Band
8,389 Points

Layout of and background colors of category names don't seem to be working...

A minor issue: My category name cards on categories.html show us as gray boxes in a column, not the multicolored row in the video. I have compared app.css with the downloaded original and found no changes, and did the same with categories.html and found only the changes I made, with no changes to the classes applied in the div tags. Anyone else run into this issue or know a solution?

Iver Band
Iver Band
8,389 Points

Actually the layout is fine (vertical). It is just the colors I am having trouble with.

1 Answer

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

My categories were laid out vertically and didn't have the colors applied. I had applied the th:each on the div with class of 'row', not the one with a col class. If you look at the css, the colors are applied using nth child (eg. ".categories .row .col:nth-child(4n+1)"), so I think they require the col divs to be siblings. The style requires there be a first, second, third child, whereas I'd altered my structure so the elements were all first children and received a single style. The following seemed okay.

    <div class="row" ><!-- previously th:each was on this div -->
        <!--
            Repeat the div element for each object in the 'categories'
            collection of the model map. Each object in the loop
            should be named 'category' .categories .row .col:nth-child(4n+1)
        -->
        <div class="col s12 l4" th:each="category: ${categories}">
            <div class="card">
                <div class="card-content">
                    <div class="card-title">
                        <a th:text="${category.name}" th:href="@{'/category/'+${category.id}}">Category Name</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

In any case, you have the css and can inspect the HTML. A failure of the css to apply requires a discrepancy from the structure anticipated by the CSS rules.