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 Ryan Hellerud
Ryan Hellerud
3,635 Points

need help with website reactive sizability html/css

Hi guys, so i have an issue with my website www.omegadesignla.com . It looks good full screen and on mobile phone but when you shrink the browser size down it gets really foobared in the top bar and shifts everything around terribly. I'm using the zurb foundation framework and may have coded some stuff not to best practices. In any case, I am looking for some help on how to fix the issues and get the site to re-size and display properly on the different browser sizes. Does anyone have any input on this matter? Thanks!

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi, great website! I can't help you much , but if you go on " How to create a website" and watch it or re-watch it again . He will show you how to make the nag bar nicely resize . I mean save this project and go and have play with it a bit with Nick . I hope this can help too . You could try it and wait till others come and help you with can take time and by the time you could or may solve it .

Ryan Hellerud
Ryan Hellerud
3,635 Points

thanks for the compliment, its really encouraging. I'm a new coder and learning and loving it so far. It gets really complicated quick though but this site is great so far and I have nothing but great feedback about treehouse.

1 Answer

Cody Coats
Cody Coats
7,469 Points

There are a few issues I see with your top bar nav. Solving all of these might not get the solution but it is what I noticed, and I am unable to do enough fiddling in the web inspector to confirm the solution.

1.) If you inspect your .top-bar-sectionon render it actually has a height of 0 (floating children in an absolutely positioned element). You should apply a clearfix to this div.

2.) Your .top-bar-section has a width of the full page. This is because ul.right has a width: 100%. Your top-bar-section inherits this. Also it is display block so it will try and fill its parent container. This style is appealingly spurious.

3.) There are a lot of !importants in your code. You want to avoid this at all costs. They are last resorts IMO. This most likely is messing with your cascasding/inheritance which is resulting in odd behavior.

4.)You should definitely add clear: both; to you .container div. This eliminates the huge chunk of white that appears on the right. Additionally I would float: left; your .top-bar-section.

The above steps got me pretty close to what I think you are looking for and is normal behavior. I was unable to actually make sure due to not being able to edit source easily.

Ryan Hellerud
Ryan Hellerud
3,635 Points

thats for the response. As it stands, my top bar was basically copied and pasted from zurb foundation, so I'm not sure exactly why its jacked up being that it was from a foundation template. Same goes for the !importants, i didnt add any of those, it must be from the foundation styling. Also, I added some changes and it looks a little better now, what do you think? I haven't added your recommendations yet but waiting for your response again and Ill play around with it again soon.

Ryan Hellerud
Ryan Hellerud
3,635 Points

Also, where can I get good info on clearfix, i havent seen it much here but probably because i skipped a few classes but where can i get good info on that? Or maybe, I should go back and watch the html class?

Ryan Hellerud
Ryan Hellerud
3,635 Points

I did do float left on the top bar but it just made the nav links move left and not really the way i want it. But i did make some changes and it got a little better but it still does some weird stuff when shrinking the browser.

Cody Coats
Cody Coats
7,469 Points

I'm not sure why they would use !important like I said I avoid at all costs. I think I have used it once for an IE8 compatibility issue. The problem is it will always override any styles no matter where in the inheritance tree they come from: it eliminates the "cascade" part of CSS.

There is a good micro-clearfix that helps. Clearfixes are necessary when an element has floating children. A way to know for sure if you need a clearfix is if you open up dev tools and inspect and element although it may have children it's height will be 0. Adding a clearfix solves this problem. I usually use http://nicolasgallagher.com/micro-clearfix-hack/ because it is small.