I am trying to remove or reduce the space between panel columns. Does anyone know how to accomplish this?
for example: A panel is laid out as follows:

area a SPACE area b
SPACE
area a SAPCE area d

How do I remove the Spaces or make them smaller from say 10 to 5? How do I accomplish this on individual panel pages?

Also how does it work between rows?

Comments

merlinofchaos’s picture

merlinofchaos commented
Status: Active » Fixed

Each layout provides margins for its regions with CSS code that looks like this:

.panel-2col .panel-col-first .inside { 
  margin: 0 .5em 1em 0;
}

.panel-2col .panel-col-last .inside { 
  margin: 0 0 1em .5em;
}

You would have to override this code in your theme to change these margins.

You can find the actual code that is used by looking in plugins/layouts and finding the layout that is used and looking at the corresponding CSS file.

hassansr’s picture

hassansr commented

to adjust the spacing horizontal between panels

modules/panels/plugins/layouts/twocol_bricks/twocol_bricks.css

edit the segments that you want to change by adjusting the %

.panel-2col-bricks .panel-col-last {
float: left;
width: 50%;
}

make the 50% to 35% to find the one you like (save file and refresh affected page to see which one responds)

btw this moves the block around

adjust the 35% to make it look as you like, remember to view it different browsers and OS to see that it looks like you want it to

to reduce the width of the text inside the panel do this:

1. turn this :
.panel-2col-bricks .panel-col-first .inside {
margin: 0 .5em 1.5em 0;
}

into this

.panel-2col-bricks .panel-col-first .inside {
margin: 0 2.5em 1.5em 0;
}

2. save and refresh, notice change
3. adjust as needed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.