Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ben Os
20,008 PointsFlex item stuck on the center instead on the left.
In my personal website in the following webpage, I have a sticky headline. It is the toppest part of the site, and will scroll down with you from a desktop computer (link below).
This headline feature 2 links from the right, and a phone number from the left.
For some reason, even though I gave to the container the following syntax, the phone number flex item is stuck on the left.
I would thank a front-end well experienced will flex for an advise on this.
#headline .container {display: flex; flex-direction: column; align-items: center}
@media screen and (min-width: 1080px) {
#headline .container {display: flex; flex-direction: row; justify-content: space-between; align-content: flex-start; flex: 1}
}
Ben Os
20,008 PointsThe row direction is fine, Ash. The problem is spacing-oriented.
Ben Os
20,008 PointsMaybe our teacher Guil Hernandez might have some free minutes to gracefully shed some light on this?
5 Answers
Laura Steiner
14,396 PointsHi, Ben --
If you want the phone number all the way on the left, one way to do it is:
#block-headlinepricelinks {
flex: 1;
}
This should cause the right div to take up all the leftover space and push the phone number div all the way to the left.
My earlier answer was based on the title of your question, where you say the phone number is stuck in the center instead of the right. In your question, you say the flex item is stuck on the left. I was helping you do as you indicated in your question.
Best,
Laura
Ben Os
20,008 PointsHi Laura and thanks again. I am sorry, it was my bad to write "right"; I meant to write left but was confused at the moment.
Indeed, giving flex: 1 to #block-headlinepricelinks moved the phone number to the left as I wanted.
I was convinced that the flex: 1 should be given to the container, but I was totally wrong.
Thank to you, dear Laura, I now know that if have 2 or more container, and the one from the right gets flex: 1, it will fill as much as space as possible in relation to the automatic width of the other 2 or more items.
Best regards 2 U !
Laura Steiner
14,396 PointsHi,
I believe the phone number is going to the left because of:
justify-content: space-between;
You can play around with the other options to get what you want. For example, using
justify-content: flex-start;
will put them both on the right. You'd probably want some margins and/or padding so they're not so close to each other.
Best of luck!
Warmly,
Laura
Ben Os
20,008 PointsHi Laura and thanks. I want the phone number on the left --- But just more left, to the edge of the container.
Laura Steiner
14,396 PointsMy pleasure, Ben!
I'm so happy it worked out!
Warmly,
Laura
Ben Os
20,008 PointsLaura, can I have only 4 more minutes of your time? Your solution works well and it is the right way when doing clean flex but as I work with Drupal blocks, they contribute their own to the design.
Please see:
&&
The website has about 400 pages, but only in pricing (and it's sub pages) one of the 2 blocks doesn't appear.
In these pricing pages, the phone number then goes to the right...
I think it is unavoidable due to the nature of the flex property but I might be wrong...
Laura Steiner
14,396 PointsHi, Ben --
I believe you'll get what you want if you change the justify-content property on the container to be flex-end. The phone number should stay on the left when the price links div is there as well as when it isn't.
@media screen and (min-width: 1080px) {
#headline .container {
justify-content: flex-end;
}
}
Ben Os
20,008 PointsSadly this particular solution didn't work... I think that the flex property isn't designed to handle this particular situation of disabling a block in one page from among the hundreds...
What I found I can do is adding this row below in the css:
.page-node-type-pricing #headline .container {flex-direction: row-reverse !important}
It fixes is that way only for pricing pages... This is a fine solution in the Drupal-CSS level. Drupal has a very efficient class system.
Thank you again for all of your help and time, I've learned much from your help.
Laura Steiner
14,396 PointsHi, Ben --
Very strange. I thought it worked when I tested it in Chrome Dev Tools. Maybe I wrote my answer in a confusing way. You'd want to replace justify-content: space-between; with justify-content: flex-end;
So it would be:
headline .container {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
Flexbox should be great at handling situations where a block is missing. It's awesome! I'm not sure what happened here.
Anyway, I'm glad you've found a solution that works for you!
Best,
Laura
Ben Os
20,008 PointsIndeed I double checked it with justify-content: space-between and justify-content: flex-end. After removing the code I added but it still stayed in the right in these particular pages without pricing links, even when !important. Only when I apply the Drupal class with the row-reverse fix it goes the left in these particular pages.
Of course the solution you offered for the original problem works fine and I use it; The issue with these few sporadic pages that doesn't is totally different and I also don't know why flex-end wasn't enough, but row reverse indeed seem to fix it.
Best regards!
Ash Scott
435 PointsAsh Scott
435 PointsYou could do
flex-direction: row-reverse, that should solve it as I see it's an RTL site?