Help with Tribute Page please

Code Feedback
1

Hi,
My Codepen tribute page appears find within Codepen dashboard, bt when I view in browser the image doesn’t respond to smaller view.

In Chrome & FireFox the image wont size down within div.

Help appreciated.

[https://codepen.io/chantrad/pen/XVxZNo?editors=1100]

<img src="https://qgdsug-am3pap001.files.1drv.com/y4mu2SOeF_1nOyUjkjRFJETZbiWiAZh6sLNzCGv6LT-MFYFI-rSZqBiUVTjnn_spOHy5ObKR3mAZbEI6mnJwj2d54G0X24XHQcdrjbGRTC0dOsXyKhyt6Ixl7uqx9IGeLP91XFTeU7SyLy5cL1jra46GFKSF3k_ckwsWSQrU-gezCni1Z96sVwsOIadm7W1EGgFMr-205dUlKP0aDCl4xZ02w?width=1024&height=683&cropmode=none"
  alt="Homeless man" class="figure-img img-fluid rounded" class="img-responsive" id="image">

<figcaption class="figure-caption">Procrastination taking a break! <a href="https://www.pexels.com">(free image from PIXELS) </a></figcaption>
2

Hi Chantrad.

This is my own curiosity and ignorance with Codepen more than anything. When you say you are viewing it in the browser, as opposed to viewing it in Codepen, what do you mean? I am new to Codepen myself. I looked at your page, which I think is very clever btw, in Full Page Mode and it worked fine.

Ron

3

what do you mean exactly? the image seems to be responsive (since you added img-fluid there), both on my real phone and on the emulated phone view with opera

4

Yes it looks fine when logged into Codepen dash board and dragging page to alter diimensions, however when I view in Chrome or FF, the image appeards offset to the left. and not minimising with rest f content.

5

oh you mean that
it’s indeed offset to the left because you did nothing to center it, i think it should look that way when you are logged in too
it being responsive only means that it changes its size depending on the screen resolution, which it does

you should wrap it and figaption in a div and center it, for instance like this

  <div class="text-center">
 
    <img src="https://qgdsug-am3pap001.files.1drv.com/y4mu2SOeF_1nOyUjkjRFJETZbiWiAZh6sLNzCGv6LT-MFYFI-rSZqBiUVTjnn_spOHy5ObKR3mAZbEI6mnJwj2d54G0X24XHQcdrjbGRTC0dOsXyKhyt6Ixl7uqx9IGeLP91XFTeU7SyLy5cL1jra46GFKSF3k_ckwsWSQrU-gezCni1Z96sVwsOIadm7W1EGgFMr-205dUlKP0aDCl4xZ02w?width=1024&height=683&cropmode=none"
        alt="Homeless man" class="figure-img img-fluid rounded" class="img-responsive" id="image">
    <figcaption class="figure-caption">Procrastination taking a break! <a href="https://www.pexels.com">(free image from PIXELS) </a></figcaption>

 </div>

if you want it to follow the column structure that you have used you should make a new row with columns for it

6

Cheers Ron,

Your a star!
I just didnt think I could use text-center for images. I know its pretty basic but what do you think of my html/css?

I’m going to replicate it using CSS Grid/Flexbox to see how it compares.

Regards,
Steve