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 rr21
rr21
6,398 Points

Responsive absolute positioning

Hi I'm having a little trouble with making absolute positioning responsive, I have a div which is absolutly position over a image that I wanted in a particular area. However on mobile it is overlapping the nav bar. Below is a snippet of code that I'm having issues with, any suggestions appreciated :)

.information-box{
    padding: 1em 1.5em;
    position: absolute;
    top: 25%;
    left: 15%;
    overflow: hidden;
    background-color: rgba(12, 22, 40, 0.8);
    height: auto;
    margin: 0 1em;
    color: #fff;
    width: 500px;
}

3 Answers

Alexander Acker
Alexander Acker
18,123 Points
Alexander Acker
Alexander Acker
18,123 Points

Hey Jade. Your width being set at a static 500px might be the issue here but might need more of a look in at some of the other elements that you're working with. Trying setting it to a percentage which should then help the element relative to it's relatively positioned element.

rr21
rr21
6,398 Points

Hi, I've changed it to a percentage value, however it's still overlapping and I think it's to do with the "top" being set to 25%, do you think the best case would be to settle this with media queries for different screen sizes? or is there another way that could be better Thank you for the reply!

Alexander Acker
Alexander Acker
18,123 Points
Alexander Acker
Alexander Acker
18,123 Points

I guess it depends on what the relationship of this DIV element is to the NAV and what kind of purpose it's serving. I personally try to keep things away from an additional media query if I can however at a certain point the design eventually calls for it in order to appropriately realign elements. Any chance you would be able to provide some more of your code on JsFiddle or CodePen? Better context around your setup would definitely help.

Alex Flores
Alex Flores
7,864 Points
Alex Flores
Alex Flores
7,864 Points

Hey Jade,

I can think of a few suggestions for you:

  1. Have you tried using a framework like Foundation? very good for responsive design.

  2. Rather than setting a static position, try setting a max-height/width. This can create a responsive effect.

  3. As Alexander said, you can use a %, but a % is based of the size of the parent element. Since you stated it's overlapping still, you can try using vw (e.g., 500vw - you wouldn't do this, it would be huge). vw is based of the viewport (users native screen size), but I don't think vw works in some of the older browsers. Might want to check up on that.

Hope this helped!