-
Greetings.
Please visit the link (Team page) in private information area and help make the width of each of the three colored bars equal (like 100%).
Also, it doesn’t seem to work well on mobile version.
Please help resolve.
Thank you.
-
Hi Sam,
The colored bars’ width is controlled by
flex-basiswhich can be found in the layout panel > flex child > basis.You can set the colored container’s flex-basis to 90% and the grey colored container’s flex-basis to 10%, just make sure the sum is 100% of the 2 values.
Here’s a screenshot for your reference: https://app.screencast.com/ekwyDJUQ40Ob2
-
Thank you. Was able to fix the first two bars. However, the third bar is way too wide and not like the first two bars. It works okay on desktop but not on mobile. Not sure what setting to adjust. Please guide at your earliest convenience.
-
Hi there,
Check the bar container to see if there is any width set to it.
Alternatively, just remove the third bar and replace it with a duplicated version of one of the other bars that has no width issue.
-
I do not see any width value set for the third bar.
I tried duplicating and still run into the same issue.
Thanks, please guide.
-
1. If you want them to be full width, you can remove the containers with
flex-basisset to 0.2. For the 3rd bar, its parent container has
min-width:600px, remove 600px from the field. -
Perfect. The parent container’s min-width was the issue.
Many thanks.
-
You are welcome 🙂
- You must be logged in to reply to this topic.