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!

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

Akhter Rasool
Akhter Rasool
8,597 Points
Posted by Akhter Rasool
Akhter Rasool
8,597 Points

Weird behaviour of elements in title

When i resize the browser the login and sign up (ul) gets shifted from their original position and the size of the title gets increased, but if i refresh the browser everything is back to normal, here's my code. 

@media (min-width:768px){

//#title{
max-height:1090px;
overflow:hidden;

}
#title  h1{
float:left;
font-size:1.5em;
width:35%;
margin: 2.5% 5% 0 5%;
padding-top:0.7%;
box-sizing:border-box;
}

#title ul{
float:right;
width:45%;
margin: 2.5% 2.5% 0 2.5%;
padding-top: 1%;
box-sizing:border-box;

}

#title ul li{
width:40%;
font-size:1em;
margin: 2% 5%;
display:inline;
//}

the weird behaviour appears like this

MJCET ASSIGNMENTS Log In Sign up

they don't stay at one line

1 Answer

nik
nik
8,925 Points
nik
nik
8,925 Points

for your title, try removing the width percentage, thats what's making it resize to 35% of its container. You want the title just to retain the font size of 1.5em and sit within the margins and padding.

If your elements are not staying in one line then theres conflict between the sizes causing the overflow to wrap. I'm assuming this is the top bar of the page?