Border from top to bottom

The border for the containers only goes as low as the lowest content, when in desktop that's the middle container but in mobile its the left container. The border line I used to separate the containers keeps changing where it ends.

How can I get the border to go to the bottom of the bar height regardless of the container height?

What can I do to adjust the phone number and email so when in mobile it wouldn't go off screen/next line?

Is it possible to use some kind of code that would scale the font and image to automatically fit the space up to the size available?

Hello @dmedianik,

Thanks for writing in!

Please edit your container and make sure to set the vertical flex layout to "End".

Hope this helps.

Hey Rue, I changed the vertical flex of all 3 containers to end however that didn't change anything.

Hello @dmedianik,

Set the "Self Flex" to Fill Space or Fill Space Equally.

To fully understand how Flex box works, please check this out:
- https://theme.co/apex/forum/t/using-flexbox/24851
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Please let us know how it goes.

Hey Rue, I set all 3 containers to Fill space and it didn't affect the borders, I then tried Fill space Equally and it still didn't change anything.

Would providing you with access help resolve the issue?

Hello @dmedianik,

​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Info to login

Hi @dmedianik,

Thank you for the credentials, that is happening because your Containers has no equal height. It's the middle container has the tallest height and the left and right container's height can only get as much as the border.

To resolve that, apply the border (left and right border) on the middle container instead, since that is the tallest container its border should cover the other container.

Another way to resolve that is to set the Bar's Flexbox Vertical layout to Stretch



That will make all the Containers of that Bar to have equal height regardless of the content inside those containers. If you do that, set all your Containers' Flexbox Vertical to Start, so the content will start at the top and won't look dis-align.

Using Flexbox
A Complete Guide to Flexbox

Regarding the phone number and email font size, please use the rem unit on the font-size option.



The rem unit will be based on the Theme Options > Typography > Root Font Size and the way your Root Font Size was set up, rem should be responsive properly.

Hope it helps,
Cheers!

Thank you, this was exactly what I was looking for.

Is there a way using css to hide text in the social media element below a certain screen size? Maybe even have the text change to something shorter? I'd like to preserve the icon however when in mobile view I'd like to change the email text to "Email Now!" and same for the phone element.

Hello @dmedianik,

You can design and create two text elements and insert different contents.
One text element will display for desktops and the second one is only visible for smaller screens containing the "Email Now" text.
You can make this possible by utilizing the "Hide During Breakpoints" option in the "Customize" tab of the text element settings. To know "Hide During Breakpoints" option, please check this out:
- https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.