Centering a child element on a small screen

HTML-CSS
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.

1 Like
3

unfortunately, the images are not shown yet

image
image819×454 31.3 KB

1 Like
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.

1 Like