Stuck...Simple CSS Help Needed


#1

Hi all,

I have been stuck on this for a long time and not sure how to fix.

Here is my Portfolio: https://codepen.io/britm1/pen/vmKwpK

Don’t mind the content, these are all placeholders for now.

I am having trouble formatting my “Mr. Chicken 1, rescued on May 15, 2090” description. I want to situate it directly underneath the Chicken picture above.

Additionally, I want to insert a second picture & description underneath those, but right aligned.

The information I found online makes sense but for some reason does not help me with what I need, which is seemingly simple enough.

Can someone take a look at my scripts and let me know if there’s something fundamentally wrong?

Thank you,
J


#2

You forgot to put a slash on the closing <ul> tag, like this:

<ul class="grid">
  <img src="http://www.ripleys.com/wp-content/uploads/2015/08/surprised-chicken.jpg" width="300" height="300" alt="Mr. Chicken 1">
    **</ul>**

And you also have <p1> as the opening tag, when it really should be just <p>:

**<p>**Mr. Chicken 1, rescued on May 15, 2090</p>

See if that does anything!


#3

Hi,

1.Please try this working snippet for your problem.

div class="img-thumbnail"
img src=’//discourse-user-assets.s3.amazonaws.com/original/3X/8/4/84793f56a0aa6f8cbf64c424786f2716df1c00b4.jpg’ width=“300” height=“300” alt="Mr. Chicken 1"
div class=“caption” Mr. Chicken 1, rescued on May 15, 2090 /div
/div

<div class="caption">Mr. Chicken 1, rescued on May 15, 2090</div>
  </div>

It is aligning the text exactly below the picture.
I have wrapped image into an “img-thumnail” class and used the “caption” class instead of p element.

To answer your second question, I would wrap the code into a “div class=“row”” , create another

tag and divide it using “col-md-6”

Hope this helps. Happy coding!