CSS - How to get rid of padding - should be simple

Hello,

On http://oakhonesty.com/

How do I get rid of the padding between the left column and the right column?

Thanks!

Bob
LVL 7
weikelbobAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zephyr ICTCloud ArchitectCommented:
Quick look shows that if you play around with the paddings of the settings below you can increase/decrease the margins of the columns. The settings are located on line 1870 of bootstrap.min.css I think.

.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{
	position:relative;
	min-height:1px;
	padding-right:15px;
	padding-left:15px
}

Open in new window


I haven't tested or made sure this doesn't change/break something else, just so you know ;-)
James BilousSoftware EngineerCommented:
On line 349 of style.css remove the "padding" attribute in the post-inner-content rule.

.post-inner-content {
  padding: 45px 50px;
  background-color: #fff;
  border: 1px solid #dadada;
  border-top: none;
}

Open in new window

Kyle HamiltonData ScientistCommented:
You should not alter bootstrap. If you're going to use bootstrap, then it's best to use it as intended, and avoid more headaches in the future.

Wrap the columns in a row. The row class compensates for the padding with negative margins. There is reasoning behind that, it's what makes it a "framework". Read the page on grid systems at: http://getbootstrap.com/css/#grid. Bootstrap is a pretty mature CSS framework and can be very powerful if you understand how to use it.

To break the rules, you have to know the rules in the first place
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

weikelbobAuthor Commented:
So I just put it in a row? I can do that! Do I have to keep the padding? Sorry, new to this stuff.
Kyle HamiltonData ScientistCommented:
yes. put the columns inside a row, and undo any padding changes you made earlier
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi Bob,
you are using bootstrap with Wordpress... I am not conversant with wordpress much...

but what I know is you can use CUSTOM CSS and add your styles  to override bootstrap css

instead of changing default bootstrap classes you can add an additional class to left column and main content ie: 'leftcol' & 'maincontent'  remove the padding in those styles and check how it looks.

hope it helps,
thanks,
Prasadh
Prasadh BaapaatWeb Designer & DeveloperCommented:
PS. to remove padding you will have to set it to zero or whatever you want.
weikelbobAuthor Commented:
Prasadh,

Will that padding change interrupt boostrap when the site is mobile?
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi bob,
the Custom styles you add will affect the Mobile view ONLY if you specify them via a media query as below
@media screen and (max-width: 767px)

Open in new window

otherwise the new CSS (as per I answered earlier) will only affect the desktop view.

the mobile specific CSS styles in Bootstrap are under different media Query in default bootstrap,

I suggest you add the new CSS styles you want to overwrite in the custom CSS file and check the page in diff devices, if mobile view is getting disturbed we will address it as per case.

thanks,
Prasadh

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
weikelbobAuthor Commented:
I'll give it a shot and be back.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.