Hey, so I have a row of images in the “CONNECT” section of my portfolio project; but can’t seem to centre it or move it at all for that matter. I’ve tried targeting it several different ways but am having quite a bit of trouble. Any help or ideas would be great! Project: https://codepen.io/MarcelPenn/pen/bXLRzE
I don’t know what you tried to move them, but targeting .row with display: flex and then using justify-content will move them horizontally. Depends on what you want them to look like though.
Sorry, I meant horizontally. I tried to use the left margin of the row as well as align items, but I guess I should have used justify content. Maybe I should take a break lol
Yeah, this is what I was looking for. Thanks!
it looks like you are using the row class in multiple elements on the website. This is likely the class that needs to be centered since the columns are contained in this class.
If it were handed off to me, I would likely create a class along the lines of connect-links to create a parent for that specific section of the website and work on styling that so it is independent of the other elements. Once that is done, use justify-content on the flex to get the element centered.
1 Like
Yeah you’re right, I need a more specific class than “row”. I’ll be changing it. Thanks!
It’s not just that you need a more specific class. While all your classes and IDs should be able to be read and you can look at the site and see where it is applied without (too much) digging for it.; in this case it comes down to what you have applied the class to. SInce the text in your other sections is also in the “row” class, any time you update the style for that element, you risk breaking the site and causing unwanted changes. Since this is something that is independent of all other styles on the site, it should be identified as such. Also keep in mind, since there is only 1 of them, you can use ID instead of class if you wanted to.
1 Like
Yeah, I know. I immediately had to go back and fix it. The problem now is I’ve wrapped it in a container, “connect-row”, and the justify-content attribute doesn’t work so I’m back to square one lol/
So wrapping it in a div didn’t work, neither did replacing the “row” class on the div, but applying both the “row” and the “connect-row” class on the same div solved it.