I am trying to figure out how to center the movie images and caption, as well as the background and trivia facts section. Often times I go back and forth between a laptop and a desktop, and I have noticed that the adjustments that I make on one monitor doesn’t look the same on the other. I tried resolving this by using flex which I thought would be a good way to further understanding how flexbox works by implementing them, but I think I ended up confusing myself.
I would like to have feedbacks on my code on where it needs correction, etc.
Thank you in advance!
If you click Analyze HTML from the editor dropdown, you’ll see that you’re missing a few closing tags. Also, the
</ul tag on line 21 is missing a
There is a new CSS property
place-content: center; that will center your flexboxes in both directions.
Finally, when I confuse myself, I find it helpful to make a new pen with the minimum necessary code (e.g. just the div containing the movie posters) and experiment until I get it right.
P.S. Miyazaki rocks
if you can use “500px” will center the photo in 500px. If you want to average within the page, you have to do 100%. Try this.
Hi @leonfeng ,
Thank you for the tip on the analyze, it was very helpful on seeing what I’m missing, etc in the code when the code starts getting a bit messy and slightly overwhelming!
I have tried testing out the place-content property, but it doesn’t seem to make a difference when I added (and removing) it in an element.
And got it! That is a helpful tip and will try to do just that.
Miyazaki is amazing!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.