Hi guys,
I’m currently doing this challenge (see photo) and wondering if my flexbox is OK. My page so far.
Am I correct in saying that this would be 2 lines of flex box, the title (10,000+) and the review stars will be on the same line? Would you give each of these it’s own container?
Thanks guys.
I would give the h1 and sub-text a container.
Side note: I would caution against practicing too much with static layouts. You may get into some bad habits, like fixed height/width, fixed positions (using positioning or fixed margin), and so on.
I would say getting the design 85% correct but having it be responsive is a lot better than 100% like an image and the page actually not working any better than an image. Because if that was the goal, we might as well just let the designer create an image and put that on the page.
Thank you.
Can you explain a little bit more on the responsive part. Are you talking in general or specifically at my html/css? The challenges above require you to also make it mobile friendly so I’m aiming also to have it scalable.
Also good practice for flexbox. I don’t plan on just doing them for the design but for everything I’ve been learning on FCC.
My goal isn’t to match the picture but to have it responsive as with every page I do.
The mockup only shows you two screen sizes, full width and stacked. But what happens in between the two layouts?
I would suggest making the page more fluid by default and avoid fixed values that only work at one screen size which you then need to change (likely multiple times) inside media queries. Some things like positional values (offset or margin), for the most part, simply can not be fixed pixel values unless you want to change them manually a bunch of times.
The fluid approach will be less pixel-perfect, but will likely also require less code. A more static-ish approach may be more pixel-perfect (at some screen sizes at least) than a fluid approach but it requires more media queries.
As always, there are pros and cons to both approaches. As long as you have a responsive design in mind from the start your good.
And in addition to the above from @lasjorg, I would suggest you start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.
Brilliant, makes a lot of sense. I’ll incorporate this into future pages.
I noticed my current one had a lot of px so I’ve started to use some % and I see what you mean. Everything moves as one, very smooth.
Thanks for this. = }
Another question: Is grid more suited to the above design rather than flexbox? Ideally if the ‘5 stars’ were all in line I could treat this as one column but since they’re not it means I can’t have them on the same axis as the main title as one can’t be a row and the other a column. Unless I use position relative.
*rows/columns I always get them mixed up.
Thank you.
You can use CSS grid, but I wouldn’t say it’s better than flexbox.
If you use flexbox you can use align-self for the children (flex-start, center, flex-end).
You don’t really need to use flexbox or grid (not saying you shouldn’t). The elements will stack by default (block-level elements) and the horizontal “offset” can be achieved with some margin. But the flexbox solution is cleaner I think.
