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 Joshua Nevard
Joshua Nevard
1,771 Points

How can I centre my nav when I reposition the browser?

Hey there,

When I shrink my browser window down to the smallest form my navagation links stay to the left and I would like them to follow responsively by being centred, I have been following the web design course so its set up to respond, but its failing to move into the centre.

Please can someone help?

thanks!

Josh

7 Answers

Michael Aguilera
Michael Aguilera
19,379 Points
Michael Aguilera
Michael Aguilera
19,379 Points

instead of floating try displaying as inline-block

primary {

width: 50%; display: inline-block; }

secondary {

width: 40%; display: inline-block; }

NOTE: I see you are using only 90% of your width. You will need to account for the other 10% either through the container, margin, padding, etc.

Joshua Nevard
Joshua Nevard
1,771 Points

I have tried inline-block and nothing has happened, hmmmm. Is there anyway I can attach a screenshot of my website, may show what I am trying to solve.

Im very new to this, apologies. What do you mean by account 10% through a container, margin, padding?

Thank you for replying.

Michael Aguilera
Michael Aguilera
19,379 Points
Michael Aguilera
Michael Aguilera
19,379 Points

You will need to add media queries to your css. If you continue on the CSS course media queries will be covered.

Joshua Nevard
Joshua Nevard
1,771 Points

Hi Michael,

I have media queries in place and perviously had it working fine, but I am struggling to work out what has changed, any suggestions?.

Here is my responsive CSS:

@media screen and (min-width: 480px) { /******************* Two column layout ********************/ #primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/******************* Page: Portfolio ********************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

/******************* Page: About ********************/

.profile-photo { float: left; margin: 0 10% 80px 0; }

}

@media screen and (min-width: 660px) {

/*******************

Header ********************/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.5em; }

h2 { font-size: 0.825em; margin-bottom: 20px; }

header { border-bottom: 5px solid #777; margin-bottom: 60px; }

}

Thanks, Josh

Michael Aguilera
Michael Aguilera
19,379 Points
Michael Aguilera
Michael Aguilera
19,379 Points

No worries. The 10% only refers to you having the entire 100% of your screen width covered or the browser will render things funny sometimes.

Try this. The only things that I changed are the float, display clear properties. I also changed @media screen and (MIN-width: 480px) to @media screen and (MAX-width: 480px). Let me know what happens.

/******************* Two column layout ********************/

@media screen and (max-width: 480px) { #primary { width: 50%; float: left; display: inline-block; clear: both; }

#secondary { 
    width: 40%; 
    float: left; 
    display: inline-block;
    clear: both;
}

/******************* Page: Portfolio ********************/

#gallery li {
    width: 28.3333%; 
}

#gallery li:nth-child(4n) {
     clear: left; 
}

/******************* Page: About ********************/

.profile-photo { 
    float: left; 
    margin: 0 10% 80px 0; 
}

}

/******************* Header ********************/

@media screen and (min-width: 660px) { nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { 
    float: left; 
    margin-left: 5%; 
    text-align: left; 
    width: 45%; 
}

h1 { 
    font-size: 2.5em; 
}

h2 { 
    font-size: 0.825em; 
    margin-bottom: 20px; 
}

header { 
    border-bottom: 5px solid #777; 
    margin-bottom: 60px; 
}

}

Joshua Nevard
Joshua Nevard
1,771 Points
Joshua Nevard
Joshua Nevard
1,771 Points

I will try this tomorrow and get straight back to you. Really appreciate your time Michael.

Joshua Nevard
Joshua Nevard
1,771 Points
Joshua Nevard
Joshua Nevard
1,771 Points

Hey,

Have just adjusted it and now the nav links move in a stack formation to the right once the window browser width is at its smallest form?

Also, I have noticed that I'm not being very clear, my nav links are next to each other so I want them to stay like that but centred.

Thanks

Joshua Nevard
Joshua Nevard
1,771 Points
Joshua Nevard
Joshua Nevard
1,771 Points

I have solved the issue, many thanks.