Jump to content

Archived

This topic is now archived and is closed to further replies.

RiverRat

header padding and margins

Recommended Posts

RiverRat    4
RiverRat

Hello, I can't seem to find where I have all the extra padding and margins in the header area? I need everything at zero. Thanks! http://buff.ly/1rIIDjg

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

Your Header canvas settings have twenty pixels for both padding top and bottom. If you remove this it will resolve your issue.

 

You will also want to add this to your custom CSS, which will remove all padding and margin bottom from the TextBox section you have used in your header.

 

#textboxueyfn7b .pl-section-pad {
  padding: 0;
  margin-bottom: 0;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
RiverRat    4
RiverRat

Hi I tried to change all of that in the CSS but it is still doing it. Do you think my custom css page is working? Thanks

 

.page-header {
    border-bottom-color: #dddddd;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 5px;
    padding-bottom: 5px;
}

element.style {
    padding-bottom: 5px;
    padding-top: 5px;
}

.pl-area-wrap {
  padding-top: 5px;
  padding-bottom: 5px;

  body.display-boxed .boxed-wrap .pl-area-wrap > .pl-content {
    padding-left: 0px;
    padding-right: 0px;
    padding-botom: 0px;
    padding-top: 0px;
}

  body .pl-area .pl-section .pl-section > .pl-section-pad {
    margin-bottom: 1em;
    padding-bottom: 0px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 0px;
}
 
#textboxueyfn7b .pl-section-pad {
  padding: 0;
  margin-bottom: 0;
}
 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

If you're having issues with CSS not working then you will want to remove all your custom CSS and see if this resolves your issue. As you likely have errors, also in your custom CSS you can remove the following as it isn't really doing anything.

 

element.style {
    padding-bottom: 5px;
    padding-top: 5px;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
RiverRat    4
RiverRat

Danny this isn't helping. You mentioned header canvas but did not give me the coding. I do not see anything that says header canvas. Where is it and how do I remove the 20 px around it. It is very frustrating having the padding around the header. I need to get this answered soon as I have been down for 3 days trying to figure out this issue. I can't see how my custom css has an error as it was just copied from the CSS anyways I need to know where it is to get rid of the 20x padding all a way around Thanks! That is the coding I am missing. Thanks!!!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

You do not need to use custom CSS to adding or remove padding, which is coming from the canvas area. When the DMS editor is loaded, go to the Header sections settings and from there select zero for both top and bottom padding.

 

https://cloudup.com/caz1y19WpHB

 

Also, half the custom CSS you have isn't really useful and you want to be more specific as it will be used on nearly every element. So you will want to remove the following:

 

element.style {
    padding-bottom: 5px;
    padding-top: 5px;
}
 
.pl-area-wrap {
  padding-top: 5px;
  padding-bottom: 5px;
 
  body.display-boxed .boxed-wrap .pl-area-wrap > .pl-content {
    padding-left: 0px;
    padding-right: 0px;
    padding-botom: 0px;
    padding-top: 0px;
}
 
  body .pl-area .pl-section .pl-section > .pl-section-pad {
    margin-bottom: 1em;
    padding-bottom: 0px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 0px;
}
 
Especially the element {...} CSS as that isn't actually doing anything. When you add CSS in Chrome which is under the element tag, all that means is that this is inline styling for that element. Copying and pasting that into your custom CSS will not doing anything, so remove it.
 
Also, please be aware that we do not provide extensive customization support.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • 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
    • flourishdesignstudio
      By flourishdesignstudio
      Hello,
      I have an older site that was built using PageLines several years ago (prior to the release of DMS). I wanted to leverage some of the power of your new PL5 plugin but the theme prevents be from adding any generated custom sidebars to the theme (through the drag and drop interface) and does not allow me to add any PL5 sections/containers/etc to the header or footer. Is there any way to easily override that or am I stuck only using PL5 in the content areas of the site?
      Thanks so much for the help!
    • JP
      By JP+
      Hello,
      How can you set the translations with platform5, the parts that are not in pages or posts? Texts and images…
    • 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?
×