Jump to content


Photo
- - - - -

padding

padding box padding

  • Please log in to reply
9 replies to this topic

#1 eileen

eileen

    Member

  • Members
  • 15 posts
  • Framework Version:baseline
  • Country: Country Flag

Posted 15 April 2013 - 03:12 PM

I'm trying to reduce the padding around the logo, nav bar, boxes at the top of the site so that I can condense the website. Note all the white space. www.showtimerealtynw.com



#2 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 15 April 2013 - 03:17 PM

Hi there! I took a quick peek and there is definitely some extra padding going on (and it looks like it might be messing up your video?) Do you have FireBug installed on FireFox or another developer/debugging tool on another browser? You will need this to figure out where to adjust your padding.

 

To give you a hint...look for the following:

 

#content .content-pad

.one-sidebar-right #column-main



#3 eileen

eileen

    Member

  • Members
  • 15 posts
  • Framework Version:baseline
  • Country: Country Flag

Posted 15 April 2013 - 04:07 PM

I have the chrome developer inspection tool. when I hovered over the header and nav bar, I got the following: 

 
.content .content-pad {
  1. padding15px;
}

 I added that to custom css using 5px instead of 15 and don't see a difference



#4 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 15 April 2013 - 06:15 PM

There were 3-4 areas that padding was defined that were affecting your site. Two were in the content-pad area and one was with the sidebars.



#5 eileen

eileen

    Member

  • Members
  • 15 posts
  • Framework Version:baseline
  • Country: Country Flag

Posted 15 April 2013 - 09:54 PM

Yes, I saw that. when I use the inspect tool, and I see the boxes with the different information, that's where I got this for the largest box:  div.content - pad 1241px x 922px. I just don't know how to put that into css language.

When i clicked on that larger box, i get this in the box on the right: element.style {

}
Matched CSS Rules
 

Please Login or Register to see this Hidden Content

media="all"
 
#content .content-pad {
  1. padding-top10px;
}
 
 
.content .content-pad {
  1. padding5px;
}
 

Please Login or Register to see this Hidden Content

media="all"
 
.content .content-pad {
  1. padding15px;
}

I just don't know what to cut and paste into the CSS editor. I put the one in the editor for the top, but it didn't change anything. 



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 15 April 2013 - 10:30 PM

Do you actually have a 1. in front of every element?

 

.content .content-pad {

  1. padding15px;
}

should be

 

.content .content-pad {

padding15px;

}

 

And,  

Please Login or Register to see this Hidden Content

media="all"

 isn't CSS. It's just code and doesn't belong in your stylesheet as far as I know.



#7 eileen

eileen

    Member

  • Members
  • 15 posts
  • Framework Version:baseline
  • Country: Country Flag

Posted 15 April 2013 - 11:52 PM

there was no 1. in front of anything. I just wish someone could show me step by step how to use the inspect tool to find the RIGHT css code



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 16 April 2013 - 12:01 AM

The information you need on using inspection tools is available to you from the source.  You can use the help function of the tool or, go to the website for information to help learn its use.

 

For Chrome: 

Please Login or Register to see this Hidden Content

 

For Firebug: 

Please Login or Register to see this Hidden Content

 

Hopefully, these will help.



#9 eileen

eileen

    Member

  • Members
  • 15 posts
  • Framework Version:baseline
  • Country: Country Flag

Posted 16 April 2013 - 09:59 PM

no, they really didn't. I was already doing what they said to do but couldn't find the css code that should have been there. That's why I asked for the help. 



#10 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 April 2013 - 10:35 PM

Hi Eileen,

 

I recorded a short video on another post to show someone how to rack down padding/margins in the css. Check out

Please Login or Register to see this Hidden Content

and you'll see the link in there for the video cast.







Also tagged with one or more of these keywords: padding, box padding