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

CSS

Posted by Ernest Son
Ernest Son
13,532 Points

overlapping flexbox elements

I am trying to code the css for the main banner on "sv-home-1". https://moqups.com/ernestson/F3Sidt3k

I accomplished my objective with relative positioning, but it seemed heavy and not appropo. then I tried an approach with flexbox, but now I'm struggling with how to make it look right and be elastic. I want the lion logo centered and the left and right <h1>'s to grow centered (in their respective divs) as the vp grows....

is flexbox my answer, or is another approach better suited? Please shed a little light...thanks 'house

Bernardo Cassina
Bernardo Cassina
13,523 Points

I think Flex-box is a great idea for arranging items in the top-navbar and the nav-bar should be fixed. Could you post your html and css?

1 Answer

Ernest Son
Ernest Son
13,532 Points

I put the problem on stackO and resolved the issue with the following code:

OLD

<div id="lower-half">
        <nav>
            <ul>
                <li>
                    <a href="menu.html">Menu</a>
                </li> 
                <li>
                    <a href="catering.html">Catering</a>
                </li> 
                <li>
                    <a href="gallery.html">Gallery</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>

            </ul>

        </nav>

nav ul{
    display: flex;
    height: 100%;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    border: 3px solid;
    border-radius: 20px;
    width: 360px;
    background-color: white;
}

nav ul li {
    align-self: center;
    flex-grow: 1;
}

THE FIX (CSS ONLY)

nav {
    display: flex;
    justify-content: center;
}

nav ul{
    display: flex;
    flex-wrap: wrap;
    width: 360px;

    list-style: none;
    border: 3px solid;
    border-radius: 20px;
    background-color: white;
}

nav ul li {
    flex-grow: 1;
}