Jump to content
Perry

Remove ALL padding from container

Recommended Posts

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

Share this post


Link to post
Share on other sites
Andrew

are you using background-position: 0 100%; property and background-repeat: no-repeat? 

Im not totally sure what you're going for, so anything you can add would be helpful :)

Share this post


Link to post
Share on other sites
Perry

I'm not sure why that would help, but I will give it a try. 

To try and clarify: If you look at my image, at the bottom there is a cutout of a woman and a background. This is a screenshot from platform5, and currently how it looks. This is being done by placing an ember element inside of a container element.  All I want is for the woman to be right on the bottom of the banner image so there is no space in between her and the bottom of the banner. I have had no luck doing so so far. 

 

Hope this helps

 

Share this post


Link to post
Share on other sites
Perry

Essentially I would like to find out a way to create an effect like this image using platform 5 where the woman, background, and logo are all in different elements. This is crucial as simply creating this image in photoshop and putting it in as a banner image will make the woman and the logo far too small when on mobile. 

 

cecebanner.jpg

Share this post


Link to post
Share on other sites
Andrew

I see, well, ya the appropriate way to do that would be with a container that has a bg image and a nested image element inside it. 

You should be able to add zero padding to the bottom of the container with the options as usual.

Share this post


Link to post
Share on other sites
Perry

Right, well, that's more or less why I started this conversation in the 1st place. The padding for the top, bottom, left, and right, is 0. In case the Platform 5 editor is mistaken, I even reset the padding and margin to 0, set it to 0 again, no luck. Cleared my cache and tried that process again, no luck. I tried resetting the entire container back to it's original state, added in the background image, and assigned it a class and within the LESS/CSS I assigned it to have 0 padding. Nothing. I even broke the rules and tried adding an !important to the end. Still no luck.  Is this an issue with my theme? I'm just using the Platform 5 default framework.

Share this post


Link to post
Share on other sites
Perry

Well after digging around the settings I found something that helped me out a lot. Hope this helps others. It still leaves a sliver of space below, but it is far more workable than before. Pretty simple (if using default framework) simply it is: Settings-> Layout / Nav -> Content Width  change that to 100%. 

 

 

Thanks for your help

  • Like 1

Share this post


Link to post
Share on other sites
Andrew

great ! in the future a live link to the issue always helps

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


  • Similar Content

    • Jared Smith
      By Jared Smith+
      I'm trying to make a visible border around the entirety of a client's site.  Example on some other site here:
      http://www.makeyourvisionreal.com/movement

      So it is around the Title, Menu, and Content Area.  I'm having a bit of difficulty with this on pagelines, using the Framework theme. It's slightly more complex because the site has a "landing page" that doesn't need the border. Much like this homepage
      http://www.makeyourvisionreal.com/
       
      Right now I'm using a content width of 80%, and fullscreen.  But maybe thats not the best way to do it.  
       
      So, with the #site id, I can hit the whole area on most of the site, but I'm not sure how I can remove it for just one page.
      #site { border:1px solid #ccc; margin: 100px 5% 5% 50px; } anyone have any suggestions?  Maybe I need to go make a child template, not sure?  Thanks!
    • 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.
    • 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?
×