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 smuchy
smuchy
4,713 Points

How to precisely position headings with Bootstrap?

Below is the image of my project and the layout I am trying to achieve. In the example below I used images as a background and than I positioned headings using relative and absolute positioning. The problem is I want the layout to be responsive, which in this case isn't...

What I want to achieve:

  • position headings the way they are in the image below (need to stay responsive for every device)
  • replace the background images with background color (but it has to keep the width:height - 1:1 ratio no matter the width of the screen)

Thanks in advance!

http://i.stack.imgur.com/tqiC7.jpg

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Found the solution here:

http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css

1 Answer

Jack Smith
Jack Smith
6,902 Points
Jack Smith
Jack Smith
6,902 Points

I would lower the number of classes in your HTML first. Maybe use some ID's. Media queries will help with responsiveness and using values in % will help also. I am new at this so sorry I can't help more.