Remove ALL padding from container

[Perry+ 1]

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

[Andrew 207]

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

[Perry+ 1]

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

 

[Perry+ 1]

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. 

 

[Andrew 207]

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.

[Perry+ 1]

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.

[Perry+ 1]

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

[Andrew 207]

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