Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 31, 2014 at 11:35 pm #311606
    goforyourdreams

    Does anyone have the code on how to make the site width 960 pixels (boxed layout), while keeping it responsive? There are only 2 options in Theme Settings: 1030 and 1210px, which are too wide for client’s needs… 960px is a very common site width, it would be great if Enfold can work with it!

    Thanks in advance for your help!

    September 1, 2014 at 3:44 am #311634
    Devin

    Hi goforyourdreams!

    The only way to do that right now would be to re-build the css files to work with that width. With the next big theme update there will be some additional new options for the widths but that isn’t for another few weeks.

    Best regards,
    Devin

    September 3, 2014 at 4:43 pm #312992
    goforyourdreams

    I finally figured it out! Posting the code here – hopefully it will help others who are looking for a more narrow site width (in this code the site width is 940). To change the site width, just adjust every single value in the code below by the percentage you are increasing/decreasing it.

    
/* #Desktop - Large
==================================================  */@media only screen and (min-width: 1140px) {
  .responsive .boxed#top {
	width: 940px;
  }
  .responsive .container {
    width: 855px;
  }
  .responsive .container .one.unit,
  .responsive .container .one.units {
    width: 33px;
  }
  .responsive .container .two.units {
    width: 108px;
  }
  .responsive .container .three.units {
    width: 182px;
  }
  .responsive .container .four.units {
    width: 257px;
  }
  .responsive .container .five.units {
    width: 332px;
  }
  .responsive .container .six.units {
    width: 406px;
  }
  .responsive .container .seven.units {
    width: 481px;
  }
  .responsive .container .eight.units {
    width: 556px;
  }
  .responsive .container .nine.units {
    width: 631px;
  }
  .responsive .container .ten.units {
    width: 705px;
  }
  .responsive .container .eleven.units {
    width: 780px;
  }
  .responsive .container .twelve.units {
    width: 855px;
  }
  .responsive #top.boxed .stretch_full {
    width: 938px;
  }
  .responsive #top .offset-by-one {
    padding-left: 74px;
  }
  .responsive #top .offset-by-two {
    padding-left: 149px;
  }
  .responsive #top .offset-by-three {
    padding-left: 224px;
  }
  .responsive #top .offset-by-four {
    padding-left: 299px;
  }
  .responsive #top .offset-by-five {
    padding-left: 373px;
  }
  .responsive #top .offset-by-six {
    padding-left: 448px;
  }
  .responsive #top .offset-by-seven {
    padding-left: 523px;
  }
  .responsive #top .offset-by-eight {
    padding-left: 597px;
  }
  .responsive #top .offset-by-nine {
    padding-left: 672px;
  }
  .responsive #top .offset-by-ten {
    padding-left: 747px;
  }
  .responsive #top .offset-by-eleven {
    padding-left: 821px;
  }
}
    September 3, 2014 at 4:46 pm #312993
    Dude

    Hi!

    Glad you figured it out. The next Enfold version (version 3.0) will make it easy for you to change the width of the content box and the padding between the content and the surrounding box.

    Cheers!
    Peter

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.