0

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 (temporary solution, just to show the layout). 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)
  • I want to achieve that circular look of the container div (title 7), just as the image on its left, but if I set the fixed height & border radius 100%, it breaks when viewed at smaller screens

Thanks in advance!

Layout

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

Found the solution here:

Maintain the aspect ratio of a div with CSS

Community
  • 1
  • 1
Bobby Brown
  • 1
  • 1

1 Answers1

0

Here's how I would achieve this.

<div class="col-md-3"></div>
<div class="col-md-3 col-md-offset-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>

<div class="col-md-12></div>

This simple layout will allow you to set-up all the columns correctly. Then you just put your content inside, bootstrap will automatically set these to responsive. I don't know why you have position relative when you can just change the padding/margin etc. to style it how you like.

My code above is simply just the layout to achieve your layout, fill them respectively and you should see results.

Circular Images = border-radius: 30px (and above depending size of the image, so fiddle with this. No need for a percentage.)

Headings, Place them in the columns using a h1 tag, style them with a class and centre them.

If you're looking to place text over the images, you could just padding: -20px; or even margin -20px on the text to move it around, but you can mostly achieve this with text-align: center/left/right; Then obviously z-index the image and the text, making sure the text is like z-index: 10 and the image is z-index:5; to place the text over the image.

  • I don't think you understood my question. Ofcouse I can do what you just said (and if you look at the code it's basically same as mine), but than I wouldn't have perfectly squared div's, like its in the picture. What I need is to position headings exactly as in the picture provided with no other content inside. – Bobby Brown Mar 03 '16 at 01:09