Jump to content
Sign in to follow this  
danielfinn

CSS help: alter padding between grid system sections

Recommended Posts

danielfinn

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. Screen-shot-2012-07-23-at-00.49.16.png 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

Share this post


Link to post
Share on other sites
batman
@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
[/code] [i]So now in your custom code section, you can do this.[/i] [code].span6.padded { padding:10px; .box-sizing(border-box); }[/code] [i]If it doesn't work, get more specific with the CSS. Ex[/i] [code]#page .row .span6.padded { padding:10px; .box-sizing(border-box); }[/code] Did you try this solution? ;)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
danielfinn
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.

Share this post


Link to post
Share on other sites
Danny
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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
beardedavenger
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.

Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
danielfinn
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.

Share this post


Link to post
Share on other sites
catrina
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.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×