My responsive design is relatively new to me, and it includes a series of fluid images in the main content area. When the screen size is below 800px, this area displays one large image that spans the full width, followed by two columns of images:
body.our_work #work ul {
list-style: none;
margin: 0%;
padding: 0%; }
body.our_work #work ul li {
float: left;
margin: 0% 1.075268817204% 1.075268817204% 0%; /* 10/930 */
position: relative; }
body.our_work #work ul li.small {
width: 49.462365591398%; /* 460/930 */ }
body.our_work #work > ul > li:nth-child(odd) {
margin-right: 0%; }
When the screen size reaches or exceeds 800px, the content area transforms into a row with one large image and one small image, followed by rows of three images each:
@media screen and (min-width: 800px) {
/* Convert to 3 Columns */
body.our_work #work ul li {
margin: 0% 1.075268817204% 1.075268817204% 0%; /* 10/930 */ }
body.our_work #work > ul > li:nth-child(odd) {
margin-right: 1.075268817204%; }
body.our_work #work ul li.large {
width: 66.129032258065%; /* 615/930 */ }
body.our_work #work ul li.small {
width: 32.616487455197%; /* 303.3333333333333/930 */ }
body.our_work #work ul li.large + li.small {
margin-right: 0% !important;
width: 32.795698924731%; /* 305/930 */ }
body.our_work #work > ul > li:nth-child(5) {
margin-right: 0% !important; }
}
Occasionally, about 20-30% of the time, this content area collapses and does not span the full width as intended. The layout remains correct, with one large and one small image in the first row and three images in subsequent rows.
I suspect that this issue is caused by the browser struggling to determine the size of the content area due to the fluid nature of the images.
To add to the confusion, inspecting the HTML in Chrome or Safari, or interacting with the content, sometimes triggers the content area to expand to its proper size. Additionally, resizing the window even slightly can fix the sizing issue.
Note that I do not encounter this problem on iPhone, iPad, or Kindle Fire devices.
Any assistance would be greatly appreciated.
jsFiddle: http://jsfiddle.net/p8n9W/
Update 1:
- The issue does not seem to occur in Firefox.
- The layout consists of a fixed sidebar with a fluid second column.
- When the problem arises, the width of the content area appears to match the width of the heading "Our Work".