Jump to content

Archived

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

janpeeters

Positioning container within other Window Height container

Recommended Posts

janpeeters

Hi, I've been fiddling around with Chrome Dev tools for a while now and I'm not able to determine how I can position the centered containers on this site http://chaoscollective.nl/ a bit lower (or even at the bottom) within their parent container. I suppose it can be done with the flex-end property but have not found a way to target the container succesfully. Does anyone know how this can be done? 

Maybe an idea for a plugin or additional feature to be able to position containers to the top of bottom of a parent container and give percentages for the height. Horizontally this can already be done very well with columns but for vertical positioning I've not found a way yet. 

Thanks for any help, I would also be helped if I would know which CLASS of ID centers the container. 

Jan

Share this post


Link to post
Share on other sites
Gavin_
#container_uope2f1 {
  1. margin-top: 20%;
}

You can change % to whatever works for you or use px - i prefer to work with % 

Share this post


Link to post
Share on other sites
janpeeters

H @Gavin_ Thanks for your suggestion. Weirdly enough the code works in Safari and Chrome but not in Firefox. It might look that way on the first section but that one is already pushed down a bit by the megamenu and therefore looks to be lower, but on the second section it is still in the middle. I've also tried adding !important. Any idea why this might not work. I'm using a child theme.

Does anyone know which class makes the container sections center vertically when in another container in window height mode? Would love to find a way where I can just put the container at the bottom of the screen.

It might be that the window height feature needs an addition in the code where it subtracts the height of the header because now it continues below the visible part of the window. Might be an issue. I'll report that later.

Thanks, Jan

Share this post


Link to post
Share on other sites
Aires

Margin top does not work in firefox. 

You would need to use the top property.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Aires

You will also need to use the

position: relative

with the top property .

And if you are going to be applying this to multiple section use a class

.your class {

top:100px;

position:relative;

}

 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
janpeeters

Thanks @Aires worked great.

Share this post


Link to post
Share on other sites

×