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
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 PointsPosition fixed not responsive
Here is a code:
http://codepen.io/tgala91/pen/jqxzRG
Top fixed div is not responsive because bulb image disappears when I make browser smaller. Is there any way to fix it?
3 Answers
jsdevtom
16,963 PointsSo basically, I use calc to calculate the left over space Please see my code pen here. I've attached a link in the page for you to see the changes that I've made. I've also attached a link to the differences below :-) Feel free to ask questions
Richard Nicholls
1,301 PointsIf you remove the fixed position and add 40px of right margin it moves okay when you re-size the browser. Why does the top div need to be fixed in a position?
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 PointsBecause I want this div to be above content there all the time.
tomlearnsstuff
I have fixed menu on the left side and fixed menu on the top. When top menu starts on the top-left side everything works fine but as you can see since I have side menu I had to move top menu a little bit to the right. Now when I make browser smaller in width bulb image is not responsive it just disappears and I don't know why.
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 PointsThanks for your time. I found another solution. I simply moved my top fixed div to top: 0 left: 0 so it will start in top-left corner. I have changed z-index so left fixed div will overlap top div. I used padding inside top fixed div instead of moving a whole div. And I also added border-box property and fixed my layout. Now I don't have to use calc() function.. but your solution is good too. Thanks!
jsdevtom
16,963 Pointsjsdevtom
16,963 PointsCan you please be more specific. For example when you "not responsive", how do you want it to respond? Do you want to hide the side menu in the left to allow more room for the 'top fixed div'. Please also state the items' id or specify exactly what you are referring to. I also can't see a bulb image... When I try to view the pen in full view, it says that you need to confirm your email in order for me to do that. I would be glad to help with more info :-)