Increasing sidebar width - Support | Kriesi.at

Tagged: sidebar width

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
April 26, 2014 at 11:54 am #256541

stevereed1968
Participant

HI

I would like to increase the width of my sidebar to around 320 pixels, so up from the current 220 px or so.

I have the site set at the max 1030 px responsive option. I guess I would like a little more room to add some larger images in the right sidebar, but still want to keep the main content area of the blog at about 700px or so.

Can you advise me on how I can do this, is it something I could change in quick CSS?

here is an example page, the homepage has no sidebar so that is all fine

http://www.leanerbydesign.com/2014/04/fresh-tangy-bean-avocado-feta-salad/

many thanks in advance

Steve

April 26, 2014 at 12:52 pm #256562

Yigit
Keymaster

Hey stevereed1968!

Please go to Enfold/Css folder and modify Grid.css file and change the size of units

Best regards,
Yigit

April 26, 2014 at 1:45 pm #256581

stevereed1968
Participant

thanks, will give that a go, does that need to be redone every time there is a theme updatE?

April 26, 2014 at 1:56 pm #256584

stevereed1968
Participant

Took a look, wouldn’t know where to start to just make the right sidebar wider

could you advise?

/*
* COMPILED WITH LESS
*/
/* Table of Contents
==================================================
#Base 960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
#Clearing */
/* #Base 960 Grid
================================================== */
html {
min-width: 910px;
}
html.responsive {
min-width: 0px;
}
.boxed#top {
margin: 0 auto;
overflow: visible;
/* position:relative; z-index: 3; */
}
.container {
position: relative;
width: 910px;
margin: 0 auto;
padding: 0px;
clear: both;
}
/*no z-index for container_wrap or fixed bgs start disapearing when other elements transition -> weird chrome bug*/
.container_wrap {
clear: both;
position: relative;
/* z-index: 1; */
border-top-style: solid;
border-top-width: 1px;
}
.unit,
.units {
float: left;
display: inline;
margin-left: 50px;
position: relative;
z-index: 1;
min-height: 1px;
}
.row {
position: relative;
margin-bottom: 20px;
clear: both;
}
.boxed .container .stretch_full {
position: relative;
left: -50px;
}
.boxed#top {
width: 1010px;
}
.boxed .container {
margin: 0px 50px;
}
#wrap_all {
width: 100%;
position: relative;
z-index: 2;
}
/* Nested Column Classes */
body .unit.alpha,
body .units.alpha,
body div .first {
margin-left: 0;
clear: left;
}
body .unit.alpha,
body .units.alpha {
width: 100%;
}
/* Base Grid */
.container .one.unit,
.container .one.units {
width: 30px;
}
.container .two.units {
width: 110px;
}
.container .three.units {
width: 190px;
}
.container .four.units {
width: 270px;
}
.container .five.units {
width: 350px;
}
.container .six.units {
width: 430px;
}
.container .seven.units {
width: 510px;
}
.container .eight.units {
width: 590px;
}
.container .nine.units {
width: 670px;
}
.container .ten.units {
width: 750px;
}
.container .eleven.units {
width: 830px;
}
.container .twelve.units {
margin-left: 0;
width: 910px;
}
#top.boxed .stretch_full {
width: 1010px;
}
/* Offsets */
#top .offset-by-one {
padding-left: 80px;
}
#top .offset-by-two {
padding-left: 160px;
}
#top .offset-by-three {
padding-left: 240px;
}
#top .offset-by-four {
padding-left: 320px;
}
#top .offset-by-five {
padding-left: 400px;
}
#top .offset-by-six {
padding-left: 480px;
}
#top .offset-by-seven {
padding-left: 560px;
}
#top .offset-by-eight {
padding-left: 640px;
}
#top .offset-by-nine {
padding-left: 720px;
}
#top .offset-by-ten {
padding-left: 800px;
}
#top .offset-by-eleven {
padding-left: 880px;
}
/* #Desktop – Large
================================================== */@media only screen and (min-width: 1140px) {
.responsive .boxed#top {
width: 1130px;
}
.responsive .container {
width: 1030px;
}
.responsive .container .one.unit,
.responsive .container .one.units {
width: 40px;
}
.responsive .container .two.units {
width: 130px;
}
.responsive .container .three.units {
width: 220px;
}
.responsive .container .four.units {
width: 310px;
}
.responsive .container .five.units {
width: 400px;
}
.responsive .container .six.units {
width: 490px;
}
.responsive .container .seven.units {
width: 580px;
}
.responsive .container .eight.units {
width: 670px;
}
.responsive .container .nine.units {
width: 760px;
}
.responsive .container .ten.units {
width: 850px;
}
.responsive .container .eleven.units {
width: 940px;
}
.responsive .container .twelve.units {
width: 1030px;
}
.responsive #top.boxed .stretch_full {
width: 1130px;
}
.responsive #top .offset-by-one {
padding-left: 90px;
}
.responsive #top .offset-by-two {
padding-left: 180px;
}
.responsive #top .offset-by-three {
padding-left: 270px;
}
.responsive #top .offset-by-four {
padding-left: 360px;
}
.responsive #top .offset-by-five {
padding-left: 450px;
}
.responsive #top .offset-by-six {
padding-left: 540px;
}
.responsive #top .offset-by-seven {
padding-left: 630px;
}
.responsive #top .offset-by-eight {
padding-left: 720px;
}
.responsive #top .offset-by-nine {
padding-left: 810px;
}
.responsive #top .offset-by-ten {
padding-left: 900px;
}
.responsive #top .offset-by-eleven {
padding-left: 990px;
}
}
/* #Desktop – Extra Large
================================================== */@media only screen and (min-width: 1340px) {
.responsive_large .boxed#top {
width: 1310px;
}
.responsive_large .container {
width: 1210px;
}
.responsive_large .container .one.unit,
.responsive_large .container .one.units {
width: 55px;
}
.responsive_large .container .two.units {
width: 160px;
}
.responsive_large .container .three.units {
width: 265px;
}
.responsive_large .container .four.units {
width: 370px;
}
.responsive_large .container .five.units {
width: 475px;
}
.responsive_large .container .six.units {
width: 580px;
}
.responsive_large .container .seven.units {
width: 685px;
}
.responsive_large .container .eight.units {
width: 790px;
}
.responsive_large .container .nine.units {
width: 895px;
}
.responsive_large .container .ten.units {
width: 1000px;
}
.responsive_large .container .eleven.units {
width: 1105px;
}
.responsive_large .container .twelve.units {
width: 1210px;
}
.responsive_large #top.boxed .stretch_full {
width: 1310px;
}
.responsive_large #top .offset-by-one {
padding-left: 105px;
}
.responsive_large #top .offset-by-two {
padding-left: 210px;
}
.responsive_large #top .offset-by-three {
padding-left: 315px;
}
.responsive_large #top .offset-by-four {
padding-left: 420px;
}
.responsive_large #top .offset-by-five {
padding-left: 525px;
}
.responsive_large #top .offset-by-six {
padding-left: 630px;
}
.responsive_large #top .offset-by-seven {
padding-left: 735px;
}
.responsive_large #top .offset-by-eight {
padding-left: 840px;
}
.responsive_large #top .offset-by-nine {
padding-left: 945px;
}
.responsive_large #top .offset-by-ten {
padding-left: 1050px;
}
.responsive_large #top .offset-by-eleven {
padding-left: 1155px;
}
}
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px, Gutter: 30px, Unit: 32px */
@media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive #top {
overflow-x: hidden;
}
.responsive .boxed#top {
width: 782px;
}
.responsive .container {
width: 682px;
}
.responsive .container .one.unit,
.responsive .container .one.units {
width: 11px;
}
.responsive .container .two.units {
width: 72px;
}
.responsive .container .three.units {
width: 133px;
}
.responsive .container .four.units {
width: 194px;
}
.responsive .container .five.units {
width: 255px;
}
.responsive .container .six.units {
width: 316px;
}
.responsive .container .seven.units {
width: 377px;
}
.responsive .container .eight.units {
width: 438px;
}
.responsive .container .nine.units {
width: 499px;
}
.responsive .container .ten.units {
width: 560px;
}
.responsive .container .eleven.units {
width: 621px;
}
.responsive .container .twelve.units {
width: 682px;
}
.responsive #top.boxed .stretch_full {
width: 782px;
}
.responsive #top .offset-by-one {
padding-left: 61px;
}
.responsive #top .offset-by-two {
padding-left: 122px;
}
.responsive #top .offset-by-three {
padding-left: 183px;
}
.responsive #top .offset-by-four {
padding-left: 244px;
}
.responsive #top .offset-by-five {
padding-left: 305px;
}
.responsive #top .offset-by-six {
padding-left: 366px;
}
.responsive #top .offset-by-seven {
padding-left: 427px;
}
.responsive #top .offset-by-eight {
padding-left: 488px;
}
.responsive #top .offset-by-nine {
padding-left: 549px;
}
.responsive #top .offset-by-ten {
padding-left: 610px;
}
.responsive #top .offset-by-eleven {
padding-left: 671px;
}
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.responsive #top {
overflow-x: hidden;
}
.responsive .boxed#top {
width: 100%;
}
.responsive .container {
width: 268px;
margin: 0 auto;
}
.responsive .units,
.responsive .unit {
margin: 0;
}
.responsive .container .one.unit,
.responsive .container .one.units,
.responsive .container .two.units,
.responsive .container .three.units,
.responsive .container .four.units,
.responsive .container .five.units,
.responsive .container .six.units,
.responsive .container .seven.units,
.responsive .container .eight.units,
.responsive .container .nine.units,
.responsive .container .ten.units,
.responsive .container .eleven.units,
.responsive .container .twelve.units,
.responsive #top #wrap_all .flex_column {
margin: 0;
margin-bottom: 20px;
width: 100%;
}
.responsive #top.boxed .stretch_full {
width: 100%;
}
/* Offsets */
.responsive #top .offset-by-one,
.responsive #top .offset-by-two,
.responsive #top .offset-by-three,
.responsive #top .offset-by-four,
.responsive #top .offset-by-five,
.responsive #top .offset-by-six,
.responsive #top .offset-by-seven,
.responsive #top .offset-by-eight,
.responsive #top .offset-by-nine,
.responsive #top .offset-by-ten,
.responsive #top .offset-by-eleven {
padding-left: 0;
}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.responsive #top {
overflow-x: hidden;
}
.responsive .boxed#top {
width: 100%;
}
.responsive .container {
width: 428px;
margin: 0 auto;
}
.responsive .units,
.responsive .unit {
margin: 0;
}
.responsive .container .one.unit,
.responsive .container .one.units,
.responsive .container .two.units,
.responsive .container .three.units,
.responsive .container .four.units,
.responsive .container .five.units,
.responsive .container .six.units,
.responsive .container .seven.units,
.responsive .container .eight.units,
.responsive .container .nine.units,
.responsive .container .ten.units,
.responsive .container .eleven.units,
.responsive .container .twelve.units,
.responsive #top #wrap_all .flex_column {
width: 100%;
margin-left: 0;
margin-bottom: 20px;
}
.responsive #top.boxed .stretch_full {
width: 100%;
}
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after {
content: “020”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Use clearfix class on parent to clear nested units,
or wrap each row of units in a <div class=”row”> */
.clearfix:before,
.clearfix:after,
.flex_column:before,
.flex_column:after {
content: ‘020’;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.flex_column:after,
.clearfix:after {
clear: both;
}
.row,
.clearfix {
zoom: 1;
}
/* You can also use a <br class=”clear” /> to clear units */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* Columns for better content separation
================================================== */
body div .first,
body div .no_margin {
margin-left: 0;
}
div .flex_column {
z-index: 1;
float: left;
position: relative;
min-height: 1px;
width: 100%;
}
div .av_one_fifth {
margin-left: 6%;
width: 15.2%;
}
div .av_one_fourth {
margin-left: 6%;
width: 20.5%;
}
div .av_one_third {
margin-left: 6%;
width: 29.333333333333332%;
}
div .av_two_fifth {
margin-left: 6%;
width: 36.4%;
}
div .av_one_half {
margin-left: 6%;
width: 47%;
}
div .av_three_fifth {
margin-left: 6%;
width: 57.599999999999994%;
}
div .av_two_third {
margin-left: 6%;
width: 64.66666666666666%;
}
div .av_three_fourth {
margin-left: 6%;
width: 73.5%;
}
div .av_four_fifth {
margin-left: 6%;
width: 78.8%;
}
div .av_one_sixth {
margin-left: 6%;
width: 11.666666666666666%;
}
div .av_one_seventh {
margin-left: 6%;
width: 9.142857142857142%;
}
div .av_one_eighth {
margin-left: 6%;
width: 7.25%;
}
div .av_one_nineth {
margin-left: 6%;
width: 5.777777777777778%;
}
div .av_one_tenth {
margin-left: 6%;
width: 4.6%;
}
/* Columns for better content separation (no margin)
================================================== */
#top div .no_margin {
margin-left: 0;
margin-top: 0;
}
#top .no_margin.av_one_fifth {
width: 20%;
}
#top .no_margin.av_one_fourth {
width: 25%;
}
#top .no_margin.av_one_third {
width: 33.3%;
}
#top .no_margin.av_two_fifth {
width: 40%;
}
#top .no_margin.av_one_half {
width: 50%;
}
#top .no_margin.av_three_fifth {
width: 60%;
}
#top .no_margin.av_two_third {
width: 66.6%;
}
#top .no_margin.av_three_fourth {
width: 75%;
}
#top .no_margin.av_four_fifth {
width: 80%;
}
#top .no_margin.av_one_sixth {
width: 16.666666666666668%;
}
#top .no_margin.av_one_seventh {
width: 14.285714285714286%;
}
#top .no_margin.av_one_eighth {
width: 12.5%;
}
#top .no_margin.av_one_nineth {
width: 11.11111111111111%;
}
#top .no_margin.av_one_tenth {
width: 10%;
}
/*breaking point logic for the common 1/4 element in ipads. makes sure that it converts to a 1/2 element in most cases*/
@media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive .av_one_fourth.first.el_before_av_one_fourth,
.responsive .av_one_fourth.first + .av_one_fourth,
.responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth,
.responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth,
.responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth,
.responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth + .av_one_fourth,
.responsive .avia-content-slider-inner .av_one_fourth {
margin-left: 4%;
width: 48%;
}
.responsive .av_one_fourth.first.el_before_av_one_fourth,
.responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth,
.responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth,
.responsive .av_one_fourth.first + .av_one_fourth + .av_one_half,
.responsive .avia-content-slider-inner .av_one_fourth.first {
margin-left: 0%;
clear: both;
}
.responsive .av_one_half.first.el_before_av_one_fourth,
.responsive .av_one_fourth.first + .av_one_fourth + .av_one_half,
.responsive .avia-content-slider-inner .av_one_fourth {
width: 100%;
}
.responsive .av_one_half.first + .av_one_fourth,
.responsive .av_one_half.first + .av_one_fourth + .av_one_fourth,
.responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth,
.responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth,
.responsive .av_one_fourth.first + .av_one_fourth + .av_one_half {
margin-top: 30px;
}
}

April 26, 2014 at 4:11 pm #256613
Devin
Inactive Moderator
Hey!

You would add it to your child theme or custom.css file so that it took priority over the parent themes classes. Its not something we can assist with unfortunately but you may also want to look into simple changing the grids used for the content area and sidebar area in the functions.php since it allows you to change the grids used for each. Starts on line 133 and the full config with comment is here:
```
/*
 * register the layout sizes: the written number represents the grid size, if the elemnt should not have a left margin add "alpha"
 *
 * Calculation of the with: the layout is based on a twelve column grid system, so content + sidebar must equal twelve.
 * example:  'content' => 'nine alpha',  'sidebar' => 'three'
 *
 * if the theme uses fancy blog layouts ( meta data beside the content for example) use the meta and entry values.
 * calculation of those: meta + entry = content
 *
 */

$avia_config['layout']['fullsize'] 		= array('content' => 'twelve alpha', 'sidebar' => 'hidden', 	 'meta' => 'two alpha', 'entry' => 'eleven');
$avia_config['layout']['sidebar_left'] 	= array('content' => 'nine', 		 'sidebar' => 'three alpha' ,'meta' => 'two alpha', 'entry' => 'nine');
$avia_config['layout']['sidebar_right'] = array('content' => 'nine alpha',   'sidebar' => 'three alpha', 'meta' => 'two alpha', 'entry' => 'nine alpha');
```
Regards,
Devin
April 26, 2014 at 4:21 pm #256615

stevereed1968
Participant

thankyou so much
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Increasing sidebar width’ is closed to new replies.