CODEWITHSUNDEEP
htmlcss
Halfpint
Halfpint

Reputation: 4079

Body of my document wraps over when resizing

I just began developing a website for a client and have ran into a problem of which I've never encountered before.

As I begin to re-size my browser my page body begins to wrap around my containers which leaves a very annoying bar to the right, I am certain it is the body element which is causing the problem as I changed the background color and the wrap appeared in that color.

I have built this site upon a fluid grid system and never had this problem in a previous version, however my client did not like the adaptive style implemented in an earlier version so I changed the responsive behavior to only take effect upon the main wrapper of the document.

My site can be seen here on my test server - http://ajsimsdesign.com , please drag resize the browser to about 400px wide and scroll across to see the problem described above.

Any suggestions to why my site is behaving like this would be much appreciated, I am completely boggled!

Upvotes: 0

Views: 61

Answers (2)

Chris
Chris

Reputation: 58

The div.container.videos that starts on line 124 of the page source isn't being resized fluidly below 940px. The code that is setting the size to 940px is line 299 in bootstrap.css. You just need to add the proper rules to resize it at the various breakpoints.

Upvotes: 1

MeltingDog
MeltingDog

Reputation: 15404

Can you try removing the width on line 299:

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px; <-THIS
}

That seems to work when I turn it off in the console.

Upvotes: 1

Related Questions