Max useable width of content Pages

David 279
(@david-279)

9 years, 5 months ago

Hello,

I’ve found how to alter my settings to set my content page max width e.g

.container, .navbar-fixed-bottom .container, .navbar-fixed-top .container, .navbar-static-top .container, .span12 {
width: 1600px;

Sets the content (span12) to 1600 pixels wide

However you can only ever use a maximum of 1200 px the last bit to the right always being blank

I’d like to be able to set up a page template that would allow me to use the full 1600 (or whatever I decide on), is there any way to do this ?

I’m afraid I’m very new to WordPress .CSS and .PHP but I’m slowly getting the hang of it

Viewing 5 replies - 1 through 5 (of 5 total)

(@rdellconsulting)

I’ve never fixed this for myself so maybe now is the time.

Add this to your css and it starts to look better:

.span9 {
  width: 1200px;
}

Come back with a link to site for more help.

Thread Starter

David 279

(@david-279)

9 years, 5 months ago

At the moment the site is on my hard drive whilst I do the dev work, but thankyou I also found https://wordpress.org/support/topic/create-customizr-full-width-template which will probably help as well

Thread Starter

David 279

(@david-279)

9 years, 5 months ago

I’ve worked out how to do what I wanted, but it’s a bit of a pig and involves a calculator.

I’ts all set originaly in the customizr color.css wher color is Black, Blue, Yellow etc

It’s defined in the @media settings

I added the following to get a maximum 1620px page width

@media (min-width: 1620px) {
  .row {
    margin-left: -30px;
    *zoom: 1;
  }
  .row:before,
  .row:after {
    display: table;
    content: "";
    line-height: 0;
  }
  .row:after {
    clear: both;
  }
  [class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 30px;
  }
  .container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1590px;
  }
  .span12 {
    width: 1590px;
  }
  .span11 {
    width: 1455px;
  }
  .span10 {
    width: 1320px;
  }
  .span9 {
    width: 1185px;
  }
  .span8 {
    width: 1050px;
  }
  .span7 {
    width: 915px;
  }
  .span6 {
    width: 780px;
  }
  .span5 {
    width: 645px;
  }
  .span4 {
    width: 510px;
  }
  .span3 {
    width: 375px;
  }
  .span2 {
    width: 240px;
  }
  .span1 {
    width: 105px;
  }
  .offset12 {
    margin-left: 1650px;
  }
  .offset11 {
    margin-left: 1515px;
  }
  .offset10 {
    margin-left: 1380px;
  }
  .offset9 {
    margin-left: 1245px;
  }
  .offset8 {
    margin-left: 1110px;
  }
  .offset7 {
    margin-left: 975px;
  }
  .offset6 {
    margin-left: 840px;
  }
  .offset5 {
    margin-left: 705px;
  }
  .offset4 {
    margin-left: 570px;
  }
  .offset3 {
    margin-left: 435px;
  }
  .offset2 {
    margin-left: 300px;
  }
  .offset1 {
    margin-left: 165px;
  }
  .row-fluid {
    width: 100%;
    *zoom: 1;
  }
  .row-fluid:before,
  .row-fluid:after {
    display: table;
    content: "";
    line-height: 0;
  }
  .row-fluid:after {
    clear: both;
  }
  .row-fluid [class*="span"] {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    margin-left: 2.56410256%;
    *margin-left: 2.51091107%;
  }
  .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }
  .row-fluid .controls-row [class*="span"] + [class*="span"] {
    margin-left: 2.56410256%;
  }
  .row-fluid .span12 {
    width: 100%;
    *width: 99.94680851%;
  }
  .row-fluid .span11 {
    width: 91.45299145%;
    *width: 91.39979996%;
  }
  .row-fluid .span10 {
    width: 82.90598291%;
    *width: 82.85279142%;
  }
  .row-fluid .span9 {
    width: 74.35897436%;
    *width: 74.30578287%;
  }
  .row-fluid .span8 {
    width: 65.81196581%;
    *width: 65.75877432%;
  }
  .row-fluid .span7 {
    width: 57.26495726%;
    *width: 57.21176578%;
  }
  .row-fluid .span6 {
    width: 48.71794872%;
    *width: 48.66475723%;
  }
  .row-fluid .span5 {
    width: 40.17094017%;
    *width: 40.11774868%;
  }
  .row-fluid .span4 {
    width: 31.62393162%;
    *width: 31.57074013%;
  }
  .row-fluid .span3 {
    width: 23.07692308%;
    *width: 23.02373159%;
  }
  .row-fluid .span2 {
    width: 14.52991453%;
    *width: 14.47672304%;
  }
  .row-fluid .span1 {
    width: 5.98290598%;
    *width: 5.92971449%;
  }
  .row-fluid .offset12 {
    margin-left: 105.12820513%;
    *margin-left: 105.02182215%;
  }
  .row-fluid .offset12:first-child {
    margin-left: 102.56410256%;
    *margin-left: 102.45771959%;
  }
  .row-fluid .offset11 {
    margin-left: 96.58119658%;
    *margin-left: 96.4748136%;
  }
  .row-fluid .offset11:first-child {
    margin-left: 94.01709402%;
    *margin-left: 93.91071104%;
  }
  .row-fluid .offset10 {
    margin-left: 88.03418803%;
    *margin-left: 87.92780506%;
  }
  .row-fluid .offset10:first-child {
    margin-left: 85.47008547%;
    *margin-left: 85.36370249%;
  }
  .row-fluid .offset9 {
    margin-left: 79.48717949%;
    *margin-left: 79.38079651%;
  }
  .row-fluid .offset9:first-child {
    margin-left: 76.92307692%;
    *margin-left: 76.81669394%;
  }
  .row-fluid .offset8 {
    margin-left: 70.94017094%;
    *margin-left: 70.83378796%;
  }
  .row-fluid .offset8:first-child {
    margin-left: 68.37606838%;
    *margin-left: 68.2696854%;
  }
  .row-fluid .offset7 {
    margin-left: 62.39316239%;
    *margin-left: 62.28677941%;
  }
  .row-fluid .offset7:first-child {
    margin-left: 59.82905983%;
    *margin-left: 59.72267685%;
  }
  .row-fluid .offset6 {
    margin-left: 53.84615385%;
    *margin-left: 53.73977087%;
  }
  .row-fluid .offset6:first-child {
    margin-left: 51.28205128%;
    *margin-left: 51.1756683%;
  }
  .row-fluid .offset5 {
    margin-left: 45.2991453%;
    *margin-left: 45.19276232%;
  }
  .row-fluid .offset5:first-child {
    margin-left: 42.73504274%;
    *margin-left: 42.62865976%;
  }
  .row-fluid .offset4 {
    margin-left: 36.75213675%;
    *margin-left: 36.64575377%;
  }
  .row-fluid .offset4:first-child {
    margin-left: 34.18803419%;
    *margin-left: 34.08165121%;
  }
  .row-fluid .offset3 {
    margin-left: 28.20512821%;
    *margin-left: 28.09874523%;
  }
  .row-fluid .offset3:first-child {
    margin-left: 25.64102564%;
    *margin-left: 25.53464266%;
  }
  .row-fluid .offset2 {
    margin-left: 19.65811966%;
    *margin-left: 19.55173668%;
  }
  .row-fluid .offset2:first-child {
    margin-left: 17.09401709%;
    *margin-left: 16.98763412%;
  }
  .row-fluid .offset1 {
    margin-left: 11.11111111%;
    *margin-left: 11.00472813%;
  }
  .row-fluid .offset1:first-child {
    margin-left: 8.54700855%;
    *margin-left: 8.44062557%;
  }
  input,
  textarea,
  .uneditable-input {
    margin-left: 0;
  }
  .controls-row [class*="span"] + [class*="span"] {
    margin-left: 30px;
  }
  input.span12,
  textarea.span12,
  .uneditable-input.span12 {
    width: 1576px;
  }
  input.span11,
  textarea.span11,
  .uneditable-input.span11 {
    width: 1441px;
  }
  input.span10,
  textarea.span10,
  .uneditable-input.span10 {
    width: 1306px;
  }
  input.span9,
  textarea.span9,
  .uneditable-input.span9 {
    width: 1171px;
  }
  input.span8,
  textarea.span8,
  .uneditable-input.span8 {
    width: 1036px;
  }
  input.span7,
  textarea.span7,
  .uneditable-input.span7 {
    width: 901px;
  }
  input.span6,
  textarea.span6,
  .uneditable-input.span6 {
    width: 766px;
  }
  input.span5,
  textarea.span5,
  .uneditable-input.span5 {
    width: 631px;
  }
  input.span4,
  textarea.span4,
  .uneditable-input.span4 {
    width: 496px;
  }
  input.span3,
  textarea.span3,
  .uneditable-input.span3 {
    width: 361px;
  }
  input.span2,
  textarea.span2,
  .uneditable-input.span2 {
    width: 226px;
  }
  input.span1,
  textarea.span1,
  .uneditable-input.span1 {
    width: 91px;
  }
  .thumbnails {
    margin-left: -30px;
  }
  .thumbnails > li {
    margin-left: 30px;
  }
  .row-fluid .thumbnails {
    margin-left: 0;
  }
}

Thread Starter

David 279

(@david-279)

9 years, 5 months ago

Actually you can get rid of all the percentage sections and a bunch of other bits so you just need to add the following to your Style.CSS

@media (min-width: 1620px) {

  .container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1590px;
  }
  .span12 {
    width: 1590px;
  }
  .span11 {
    width: 1455px;
  }
  .span10 {
    width: 1320px;
  }
  .span9 {
    width: 1185px;
  }
  .span8 {
    width: 1050px;
  }
  .span7 {
    width: 915px;
  }
  .span6 {
    width: 780px;
  }
  .span5 {
    width: 645px;
  }
  .span4 {
    width: 510px;
  }
  .span3 {
    width: 375px;
  }
  .span2 {
    width: 240px;
  }
  .span1 {
    width: 105px;
  }
  .offset12 {
    margin-left: 1650px;
  }
  .offset11 {
    margin-left: 1515px;
  }
  .offset10 {
    margin-left: 1380px;
  }
  .offset9 {
    margin-left: 1245px;
  }
  .offset8 {
    margin-left: 1110px;
  }
  .offset7 {
    margin-left: 975px;
  }
  .offset6 {
    margin-left: 840px;
  }
  .offset5 {
    margin-left: 705px;
  }
  .offset4 {
    margin-left: 570px;
  }
  .offset3 {
    margin-left: 435px;
  }
  .offset2 {
    margin-left: 300px;
  }
  .offset1 {
    margin-left: 165px;
  }

  input.span12,
  textarea.span12,
  .uneditable-input.span12 {
    width: 1576px;
  }
  input.span11,
  textarea.span11,
  .uneditable-input.span11 {
    width: 1441px;
  }
  input.span10,
  textarea.span10,
  .uneditable-input.span10 {
    width: 1306px;
  }
  input.span9,
  textarea.span9,
  .uneditable-input.span9 {
    width: 1171px;
  }
  input.span8,
  textarea.span8,
  .uneditable-input.span8 {
    width: 1036px;
  }
  input.span7,
  textarea.span7,
  .uneditable-input.span7 {
    width: 901px;
  }
  input.span6,
  textarea.span6,
  .uneditable-input.span6 {
    width: 766px;
  }
  input.span5,
  textarea.span5,
  .uneditable-input.span5 {
    width: 631px;
  }
  input.span4,
  textarea.span4,
  .uneditable-input.span4 {
    width: 496px;
  }
  input.span3,
  textarea.span3,
  .uneditable-input.span3 {
    width: 361px;
  }
  input.span2,
  textarea.span2,
  .uneditable-input.span2 {
    width: 226px;
  }
  input.span1,
  textarea.span1,
  .uneditable-input.span1 {
    width: 91px;
  }
}

The Width setting needs to be 30 pixels less than the display size, .span1 to .span12 values are obtained by dividing the screen display size by 12 then multiplying by the span number before subtracting 30, to get the offset size add 60 to the span size for each value to get the input.span vale subtract 14 from the span value.

Seems a complicated way of doing things and you must apparently do each of the 3 settings for each size or it doesn’t work.

If anyone has a shorter way of doing things I’d love to know, I only started playing with web sites 10 days ago so I have a lot to learn.

rdellconsulting

(@rdellconsulting)

9 years, 5 months ago

I did start to work this out on a s’sheet so thanks for completing the job.

I need to experiment as at 940px, the margin is 20px. Would be nice to come up with a width % rather than px that works at all widths.

But I guess the Twitter Bootstrap authors would have done that if it was possible (which is why I abandoned ship).

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Max useable width of content Pages’ is closed to new replies.