Jump to content
Sign in to follow this  
eileen

padding

Recommended Posts

eileen    0
eileen

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

Share this post


Link to post
Share on other sites
mackenzie    12
mackenzie

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


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
eileen    0
eileen

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

Share this post


Link to post
Share on other sites
mackenzie    12
mackenzie

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.


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
eileen    0
eileen

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
 
 
#content .content-pad {
  1. padding-top10px;
}
 
 
.content .content-pad {
  1. padding5px;
}
 
 
.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. 

Share this post


Link to post
Share on other sites
Rob    547
Rob

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

 

.content .content-pad {

  1. padding15px;
}

should be

 

.content .content-pad {

padding15px;

}

 

And,  

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
eileen    0
eileen

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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:  https://developers.google.com/chrome-developer-tools/

 

For Firebug:  https://getfirebug.com/wiki/index.php/Firebug_Links

 

Hopefully, these will help.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
eileen    0
eileen

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. 

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Eileen,

 

I recorded a short video on another post to show someone how to rack down padding/margins in the css. Check out http://www.pagelines.com/forum/topic/26135-removing-whitespace-between-content-section-and-following-section/ and you'll see the link in there for the video cast.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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  

  • Similar Content

    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • chamois_blanc
      By chamois_blanc+
      Hello,
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
    • Kempston
      By Kempston+
      Good day
      How do I indent textbox content so that it's not flush against the side of the screen on mobile devices?
      When I view Kempston Truck Hire East London on my phone, the text is aligned against the side of the screen and doesn't look right.
      Many thanks
      Rob
    • pagelines_45
      By pagelines_45
      I am trying to remove the bottom padding from a media box.  When I inspect and change the value it works but I can not for the right css section names to change it in either the page css or custom code area.  I have even tried custom style for the page, but no luck.  Here is the site http://wordpress.howard-boats.com/  on the home page I am trying to get the wide sailboat image to touch the foot.  bottom-padding:0px  but I cant get it to work.  Thank you for your help I'm sure I am doing something stupid.
       
      David
       
×