Force element to be the center of container

Support
#1

Hi. On this page: http://fluent.group/ if you see the screenshot: http://imgur.com/a/XJVv5

There is a header row where there are 3 containers centered where Vertical: Center. However, because the container on the left is bigger than the container on the right, the container in the middle is not truly centered.

How do I force the container in the middle to be the center of the page and have the other containers stick to the sides of the middle container?

#2

Hi there,

In terms of layer positioning, I think I’ll recommend rev slider, you could center them while being responsive. Even if you fix it, it will not behave the same on other devices. Example, try resizing your browser and the text will collapse instead of responding (eg. scaling). In Revslider, it’s handled automatically and beautifully, plus, you don’t need to apply custom CSS.

Thanks!

#3

What are you talking about?! What does the slider have anything to do with the header bar? The element in question rests within a header bar from Pro.

#4

Hi There,

I found a solution by forcing the containers size, but I would like to take a closer look on your setup to see if there is a better approach.

Please provide your login credentials in a secure note

Thanks

#5

Sure. I just provided it above

#6

I There,

I have changed the vertical space of your bar with logo and 3 elements and it looks good now, I also centered the navbar above.

Hope it helps

#7

Hi Joao,

Thank you but do you mind actually telling me what was changed and what I missed. I appreciate your time and help but at the end of the day, I’d rather learn how to do this myself instead of reaching out to have someone else do the work for us, as I’d imagine this isn’t the purpose of Themeco’s support.

#8

Joao. I just combed through the changes vs the live site’s configuration and it looks like for Bar 2, the only change was from Center to Space Around, which doesn’t do anything except align column 1 and column 3 to the sides of the browser. The goal is to center column 2. And by “center”, I do not mean relative to the other elements but rather the browser.

Let’s revisit the goal: I’m just curious to know if there’s a setting in Pro’s Header Builder that allows this without touching code. Otherwise I’m happy to use CSS but thats really it. This question also applies to the footer because if you look at the seal, it is evenly spaced between the three columns instead of being centered on the page itself.

If there’s anything I’m doing wrong in regards to the usage of the theme or explaining myself here, please let me know as well because I’m just confused as to where the disconnect is coming from, as this question is 4 days into the making.

#9

Hi There,

Thank you for the clarification. Now, to achieve what you want, we do need to make those containers to have the same size and then center the content on the middle container. That way it would also be centered relative to the browser. See this screencast for settings: https://screencast-o-matic.com/watch/cbiteElyI1

Hope this helps.