Problem with flexbox justify-content (i think)

1

I am working on my landing page.

I have a class called .content-div (red border), the div that contains two items each with a class, .item-img (green border) and .item-copy (yellow border). For some reason, these two items are not centered. I’d like them to be centered as a pair with a bit of space between them. Notably, changing the value for .content-div’s justify-content shows no changes. Thoughts? Help please.


CSS, line 127

2

You’re going to have to be more specific. It looks pretty centered to me. Do you mean horizontally or vertically?

3

Thanks for the reply! I mean centered on the horizontal. Notice the yellow bow w/ text is touching the right side of the red border. I am trying to center the stump and the yellow text div together (not on top of one another) within the red border. Line 135, justify-content: center; If I change the value to flex-end or something, nothing changes. Something else is affecting the alignment and I just don’t see it.

4

This is due to this:

.item-img {
  background-color: #fff;
  transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
}

If you want to resize the image in this way, you can instead use the height and width for your image.

img {
  heigth: 300px;
  width: 300px;
}
5

Tried it already. Doesn’t work. If I comment out my scaling and add width: 200px; height: 200px; it looks like this.

Screenshot_2019-01-05%20FCC%20Project%20%233%20Landing%20Page
Screenshot_2019-01-05%20FCC%20Project%20%233%20Landing%20Page992×545 26.3 KB

The new width and height affect only the border radius. The img itself just hangs out side the box entirely.

6

I added

img { heigth: 300px; width: 300px; }

and so it began to look like that:

Screenshot
Screenshot1064×346 17.6 KB

7

Doing that affects all of the images on the page. :frowning:

9

This img has two classes already. I’ve added a fixed width value and auto height value. I also made changes to the other class and the container element. It’s finally lining up! Thanks.

10

I’m pretty new here, so i’m sorry if this is a stupid response, but have you tried adding a margin? I added a margin-left: 25px; to the .item-copy itself and it looks a little more centered that way, if I understand what you’re saying.

11

First off, there are no stupid responses or questions. :slight_smile: Second, I managed to get it working but thanks for your input!

12

Please share your solution - it may help other campers.