CSS help: alter padding between grid system sections

[danielfinn 1]

I would like to alter the padding beweetn pagelines grid system sections, however, I am not sure how to do this. I have noticed the grid system is built upon percentages. I was wondering if there was an easy way to change the percentage between spanned sections without messing up the rest of the site. I have included an image outlining two sections created using the code below. The gap between the two is very small and I would like to increase this. code for the above image

I am trying to avoid using a CSS rule to apply padded sections within this grid system. Sorry I started a similar topic before, but I accepted an answer, which I later found out was not suitable.

What I do

Services

[batman 389]

@beardedavenger give you this solution in your similar topic before, he said: [i]Ya ok so an example. Your original markup below, and I added a class "padded" after span6. This means we can now target this specific div (instead of changing .span6 and have it affect the entire site).[/i] [code]

What I do

Services

Pricing

[danielfinn 1]

I did try that solution, but I think it is a little bit too long winded for what I am trying to achieve. It works perfectly though. I am wanting to add the same amount of space between each span, and I found myself creating padded CSS tags for span6, span4 etc and it all got a bit complicated. Also I want all the boxes to be even, so I found myself adding a .span6.padded-right tag 5 px to the box on the right and a .span6.padded-left tag 5 px to the box on the left. i was just hoping there was an easier solution. Thanks for the suggestion though, is definately useful.

[Danny+ 1,327]

Hi Daniel, I am not quite sure why you want to add padding to the grid system or what you want to achieve by doing so. Either way, we do not support this type of modification, there should be no reason to modify the grid to be honest.

[beardedavenger 158]

Ya the answer isn't gonna change either so posting and asking again isn't gonna help. It'd be cool if there was a magical unicorn that you could tell, "hey unicorn dude, do this on all my page" and it would do it, but this is the real world, and well unicorns are extinct. If you want something done, like you are wanting, it takes code, whether automated, or manual. That's just how it works.

[danielfinn 1]

Thanks I understand. What i was wanting to do is alter the gap between each of the 12 spans in the pagelines grid system, I felt that by default they just looked like double spaces and didn't really emphasise the columns enough. I used CSS rules to add panning to spanned sections within the grid system, however, I found that this messed up the responsive nature of the site if you were to view it on a mobile device. Also alter the padding of sections within the grid system mean tht thye were out of line with the main body of a page. Sorry if I have not explained myself very well, I will mess around with some custom CSS.

[catrina 103]

If you're having appearance issues on a mobile device, you can try using the browser-specific CSS plugin (available on the PageLines Store) )so that there is CSS that will work properly for the mobile device and CSS that will work properly on a computer browser.