How would I connect the 2 images to the middle image?

HTML & CSS
41

Yup, add the display:table-cell to both of those elements and take them off the <img /> tags

42

How would you write it in this line of code?

<a href="#nogo"><img src="https://i.imgur.com/yj38Wz2.png" style="display:table;" width="60" height="60" style="display:table-cell;border: solid 5px #38761d; margin-left: -9px; "></a>

43

Now if I did that, how would I get you to learn how to think about this problem :wink:

2 Likes
44

<a href="#nogo" style="display:table-cell;"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" style="display:table-cell;border: solid 5px #38761d; margin-left: -9px; "></a>

45

How do you get it to reduce in size?

.socialinks img {
    display:block;
    width:100%;
    height:auto;
}
46 
.socialinks img {
    display:block;
    width:100%;
    height:auto;
}

<a href="#nogo" style="display:table-cell;"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" style="display:table-cell;border: solid 5px #38761d; margin-left: -9px; "></a>

<a href="#nogo" style="display:table-cell;"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" style="display:table-cell;border: solid 5px #38761d; margin-left: -9px; "></a>
47

You need to add those styles to each of your images.

48

And you still need to remove those display: table-cell from both images.

2 Likes
49 
<a href="#nogo" style="display:table-cell;"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" style="border: solid 5px #38761d; margin-left: -9px; "></a>

<a href="#nogo" style="display:table-cell;"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" style="border: solid 5px #38761d; margin-left: -9px; "></a>
50

Now apply the above to each image.

Granted, you still need a parent container marked as display:table

52 
<a href="#nogo" style="display:table-cell;"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" style="display:block;width;100%; height:auto;border: solid 5px #38761d; margin-left: -9px; "></a>

<a href="#nogo" style="display:table-cell;"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" style="display:block;width;100%; height:auto;border: solid 5px #38761d; margin-left: -9px; "></a>
53

I’m confused.

54

About what?

55

Well, you are almost there, you now have the right attributes on the <a> tag and the <img /> tags. Now you need a parent container.

What is a parent container? An element that contains other elements. What type of HTML tag usually contains other elements? And in your problem, what elements should be contained?

56

How?

57 
<div class="socialinks">
    <span><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></span>
    <span><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></span>
    <span><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></span>
</div>
58

post 50, or 48 is right so far?

59

This is right so far

Now read this

60

I didn’t know if you were allowed to put 2 heights and 2 widths.

61

The inline style will override the height/weight attribute. So you can safely delete the actual attributes.