Jump to content

Archived

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

selmakdesign

customizing canvas padding created white border under footer

Recommended Posts

selmakdesign

Hello,
 
I'm having major problems reducing the padding in the DMS2 elements such as the canvas, textbox and header. Without custom css there is a generous amount of space at the top and bottom of these elements and typing border: 0px in the front end editor makes no difference.
 
nopadding%20no%20css.png 
 
So I've typed in the following into custom css:

[codesyntax].header-padding .pl-area-wrap { /*change the padding in the fixed heading. To activate add "no-padding" class to front end element!*/
padding:10px 0 0 0 !important;
}
.no-padding .pl-section-pad { /*remove top and bottom padding of selected text boxes. To activate add "no-padding" class to front end element!*/
padding:0px !important;
}[/codesyntax]

 

nopadding%20with%20top%20css.png

 

But here's the issue: now a white border underneath the footer has appeared! Even though it's only supposed to affect the items with the custom class added to them. 

 

The white border is visible in larger screen sizes, for example 24"

 

nopadding%20with%20css.png

 

I removed the css class from the footer canvas to see if that's causing it but it makes no difference. The only way not to get this white space so far is by not customizing the padding!

 

Some help please !!

Share this post


Link to post
Share on other sites
Danny

Hi,

We are going to need a link to the site in question.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

Has this been resolved, as I unable to see any space in your header or footer ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
selmakdesign

I actually haven't changed anything and yet checking now I see there's no white space anymore. BUT my client just sent me a few screenshots where the white border is visible.

 

white%20border.jpg

Share this post


Link to post
Share on other sites
Danny

This is likely due to the fact that the footer isn't a sticky footer and there isn't enough content on screen to push the footer to the bottom of the browsers viewpoint. What you can do is apply custom CSS to push the content down on those kinds of pages or you can specify a background color for the html which will give you a result like this:

 

https://cloudup.com/c0tjZIchqOU

 

Simply add the following:

 

html { background-color: #000; }

 

Change the color value to whatever you like.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
selmakdesign

Thank you Danny you're a star as usual!!  :jig: 

 

I think he'll be happy enough with that. I'm suspecting I'll need this code for more websites and the sticky footer would be a good option as well. I've just tried out a few codes and this one comes the closest so far, only issue now is it doesn't pull down all of the footer judging by the dark grey gap. So there's probably a class that I need to include??

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

sticky%20footer.png

 

PS. perhaps it's a good idea to include the sticky footer as a standard option in the next DMS2 update?  :cool:

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
    • 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
       
×