When I resize browser window it covers my slideshow content - Bootstrap

Question

I'm using bootstrap for a personal website, and I'm having trouble with a Javascript slideshow.

Basically, when the browser window gets smaller, instead of the slideshow DIV content shrinking proportionally and maintaining the sizes of the content, it is cutting off the edges of the content.

The text isnt breaking to another line when I resize the browser it just covers up the content. I'm sure this is very simple but I just cant work it out, would be very appreciated if someone could take a look, here is the link to the website you can see for yourself.

http://www.luke-taaffe.com

Answer 1

I see some issues with your HTML. Layout you have created is not required and you'll keep running into issues as you move forward with it. Hence i would suggest to fix it now itself.

1. As you want to use bootstrap, get more idea about their responsive design elements : Tutorial / Bootstrap Responsive Grid System

2. Then choose a theme among these

   It will automatically take care of you design's responsiveness.

Answer 2

Ok I fixed the issue, I spent about an hour looking at the media queries in bootstrap-responsive.css.

First I had to use navbar-right in my header and remove all of the margin, padding I had previously used to position the links.

This was stopping the links this maintained the links to the right of the window without covering them when I resized.

Then the navbar was breaking onto 2 lines, so I had to change the media queries.