All threads / Using Flexbox to arrange images

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Using Flexbox to arrange images

Petter Jhon asked in CSS

Hello guys,,
I'm working on my first web dev portfolio and I have currently have two screenshots of websites I've made. I'd like them to display very simply, gallery-style, so that on a larger screen they are in a row next to each other, or on a smaller screen they stack into a column. I figured Flexbox would be the best way to do this so that I can easily add more images at a later date and they can just continue to flow together. https://showbox.bio/ https://tutuapp.uno/ https://vidmate.vet/

I can see when I do "inspect" that the Flexbox CSS rules are in effect, and running my full code through the validator shows no errors. My suspicion is that I'm mis-understanding something about Flexbox, maybe something about how child elements interact with Flexbox parents? But I can't figure out why the images aren't displaying next to each other in the browser.

Here's the section of code I'm talking about, in case it helps describe what I'm trying to do: https://codepen.io/portugueseninja/pen/zYYmrwb

Thank you :)

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 34,885+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.