0

I have tried many solutions posted on the web and none seem to solve my problem when the width goes larger than 1920 px. The things I have tried include, but not limited to:

I have even tried the good old trick of wrapping the div in a text element and just aligning it to center but it was no good. Before I move on to code here are some pictures to visualize the problem. Here is how it looks like when width <= 1920px (ignore the minor alignment issues on bottom of the page)

enter image description here

And here is what happens when I expand the screen. Everything except that row aligns perfectly.

enter image description here

Relevant Code:

HTML:

<div class="displaylayer">
    <div class="container">
        <div class="row">
            <div class="col-md-1 col-lg-1">
                <img src="images/button2.png" class="clickthisleft" />
            </div>
            <div class="col-md-5 col-lg-7"> 
                <div id="displayframe">
                    <div id="display">
                        <img id="mainimage" src="images/col1.jpg" height="420" width="960" />
                    </div>
                </div>
            </div>
            <div class="col-md-1 col-lg-1">
                <img src="images/button2.png" class="clickthisrigth"/>
            </div>
        </div>
    </div>
</div>

CSS:

 .container{
   width: 100%;
 }
 .row{
   width: 100%;
 }
 .displaylayer {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

 .displaylayer .row div{
    margin-left: 5%;
  }

  #display{
     width: 960px;
     height: 420px;
     overflow: hidden;
     margin-left: 0%;
     margin-right: auto;
     border-radius: 4px;
     background-color: white;
  }

 .displaylayer .container{
    width: 100%;
 }

 .displaylayer .row{
    width: 100%;
    margin-left: 200px; 
 }
 .clickthisleft, .clickthisrigth{
     margin-top: 130px;
     width: 70px;
     height: 200px;
  }

  .clickthisrigth{
     margin-left: 45%;
   }

 .clickthisleft{
    margin-left: 100%;
  }

Any suggestions are appreciated. Even if it takes to up to a certain width, I can manually arrange for the rest. Every automated pixel means less manual optimization which is always good.

Community
  • 1
  • 1
sinanspd
  • 2,589
  • 3
  • 19
  • 37

2 Answers2

1

Currently your columns don't take up the full 12-column width of Bootstrap. Each column is floated left, so they will align to the left. You want to add an offset to your middle column to force it in the middle.

For example, 12 - 1 - 1 - 7 = 3 columns left. You want to split that, so if you add a col-lg-offset-1 on the 7-column middle section, then it will be one column closer to the center. That won't be perfect, however, and unfortunately you currently can't divide by half a column.

Your best bet would be to make the middle column 8 wide, and keep that 1 column offset (or equivalently, make it 10 columns wide and don't have the offset). Each div inside will be display: block, which means it takes up the full width. Images are display: inline by default, so you can force them to the center:

#display {
    #mainimage: {
        text-align: center;
    }
}

text-align applies to inline and inline-block children, so it's important to apply it to the parent of the image (and to keep the image as inline or inline-block).

FeifanZ
  • 16,250
  • 7
  • 45
  • 84
  • This works. Only the code you provided modifies the slider but I didnt know it had to add up to 12 (I can only pick one answer so I just did first come first serve but this works perfectly) Thank you so much. For arranging position I can deal with that with margin properties I think =) – sinanspd Mar 13 '15 at 01:00
1

First note that the sum of the values of the scaffolding classes (col-md-* col-lg-*) must be equal to 12 Bootstrap grid example so try to change the HTML to this:

<div class="displaylayer">
<div class="container">
    <div class="row">
        <div class="col-md-1 col-lg-1">
            <img src="images/button2.png" class="clickthisleft" />
        </div>
        <div class="col-md-10 col-lg-10"> 
            <div id="displayframe">
                <div id="display">
                    <img id="mainimage" src="images/col1.jpg" height="420" width="960" />
                </div>
            </div>
        </div>
        <div class="col-md-1 col-lg-1">
            <img src="images/button2.png" class="clickthisrigth"/>
        </div>
    </div>
</div>

or try with different values but must sum up to 12.

Diego López
  • 1,559
  • 1
  • 19
  • 27
  • You guys are awesome. I actually never thought about this (didnt know they had to sum up either) . Thanks you so much ! – sinanspd Mar 13 '15 at 00:58