Help? The columns on my tribute page separate really far when zoomed out

1

Hi, I have been working on my tribute page project and have been having trouble with the spacing between my columns. When I zoom out the columns become very far apart (or just a lot of white space).

I am wondering if there is a way to fix this or if its just how it is. I have been searching the web and can’t find anything on this issue, at least that I can understand.

Here is my page, please take a look and let me know if you have any idea. Thanks in advance and sorry if this is a dumb question.

Tribute Page

2

Hi I believe it’s because you have fixed widths in your CSS for borders, imgs etc.

3

Thanks, I am grateful for the response. I tried removing all of the fixed heights and widths on both my images and borders. Nothing changed with the photos (aside from one being slightly larger naturally) and the border just grows while the text stays the same size when zoomed out.

4

Refer this Bootstrap’s own reference. It’s more concise & straight forward. Maybe you will find what you are looking for there. Also while applying col classes within row div, you can apply more than one col classes for different screen widths. Like this.

<div class="row">
  <div class="col-xs-12 col-md-8">.........</div>
  <div class="col-xs-6 col-md-4">............</div>
</div>

so col-xs will manifest on small screen, and col-md will manifest on medium screens etc.
More details here: http://getbootstrap.com/css/#grid-example-mixed
and here: http://getbootstrap.com/css/#grid-example-mixed-complete

5

  • Put your all CSS style properties in the CSS box.

  • You are applying width properties in border and images which are keeping them fixed width at given px. So bootstrap grid system is not able to change them according to a screen size.

See here. I have forked and changed your tribute page. See if that’s how you wanted. See how I have put all style properties in the CSS box separately.

6

I have tried to remove the widths and heights from my borders it doesn’t look much better when zoomed out. What happens is that they just stretch horizontally creating white space and the image captions stretch way longer than the image, it looks extremely bizarre. I think I am just going to have to forget it or change my layout because I don’t think there is a fix for this.