CSS Cards alignment

Hi, so I’m using CSS cards as my portfolio section of my portfolio, but when I add them to my project they line up vertically on top of one another instead of side by side. It works fine separately, as in here https://codepen.io/MarcelPenn/pen/rXpyrg, but when I try to implement it into my portfolio project they line up vertically as I said, like the “portfolio” section here https://codepen.io/MarcelPenn/pen/voWNqG?editors=1100. Any tips or ideas on how to fix this would be great!

When I inspect the Portfolio30_rework from Firefox, the card element is recognized as a flex element. It is not the case for the card element in Portfolio-Cards … I don’t see why makes the difference?

1 Like

Hello!
You need a container to wrap all your cards into. I made a div id="allCards" and dropped this in your CSS:

#allCards{
  display: flex;
}

All your cards are lined up in a row.
-J

2 Likes

I think it’s got to do with the external bootstrap stylesheet you linked in the head. It applies its own rules to a class called “card” (such as display: flex), and those rules don’t work well with your existing styles. If you rename your card class in html and CSS to something else, they will be shown side by side again, but then you will lose the rules bootstrap applied to them. So you can either change your markup and styles to work with bootstrap rules, or scrap bootstrap and write everything from scratch.

1 Like

Yeah I’m not sure what’s going on there either.

This solved it, thanks! as ArtemPetrov said there are default bootstrap settings throwing things off but that code snippets overwritten it. Good solution, simple but effective haha

Yeah that’s exactly what was going on. I was able to overwrite the existing default settings by wrapping it in a div and using an ID. Seems to work for now.

2 Likes

Thanks for the help everyone, the only problem now is that my media query doesn’t work anymore for smaller screens after applying the #allCards ID. Solving one problem just creates more I guess! lol