Centering a child element on a small screen

Centering a child element on a small screen
0

#1

Hi Everyone, Thank you in advance for your help! I completed the Portfolio project for the freeCodeCamp curriculum and then made a second one to explore some other concepts. I am having trouble centering the child elements in the “portfolio” section on my page for medium and small screens. Does anyone have a solution?

I used W3.CSS and Bootstrap to do most of the site.

Also, could you tell me if the images are showing up on the page? I am hosting images through Imgur.com and want to make sure they show.

Thanks!

https://codepen.io/bluesky4u/full/oaXxXR/


#2

@bluesky4you, try:

.w3-col {
  display: flex;
  justify-content: center;
}

This might ruin something, as I believe w3-col is from-framework class and you might use it elsewhere, I would suggest adding your custom class something like class="w3-col align-center" and apply it to align-center instead.


#3

unfortunately, the images are not shown yet


#4

Thanks! I will give it a try.


#5

Thank you for the screenshot @jeltehomminga. It looks like Imgur.com doesn’t work quite well with Codepen. I switched to Cloudinary.com and it seems to be working now.