Centering a child element on a small screen

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 and want to make sure they show.


@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.

1 Like

unfortunately, the images are not shown yet

1 Like

Thanks! I will give it a try.

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

1 Like