Responsive image isn't responsive

Good morning,

If you look at www.markallanholley.com, you’ll notice that the robot-girl image on the right isn’t responsive at all. I’ve coded what I thought was a correct way to deal with it, but I’m having no luck whatsoever. I was wondering if someone would take a look.

I’m absolutely sure that the CSS is correctly targeting the HTML because I did a little test by changing the background color to green and the background turned green. Then I erased that green line of code.

HTML:

<section class="rightsection">

			 <figure>
			 	<img src="../links/notarobot.jpg" alt="Sad robot looking at computer."  class="responsive"> 
			 	<figcaption>"Not A Robot" 2019, Blender, Photoshop</figcaption>
			</figure>

			</section>

CSS:

.responsive {
  max-width: 100%;
  height: auto;
}

This is the site:

www.markallanholley.com

The image in question is the one to the far right. Any assistance appreciated.

– Mark

Hey there,

It’s showing as responsive on my browser. Did you fix the problem?

1 Like

I did. I just fixed it a few minutes ago and forgot to update my post here. Thank you for looking into it toastedpitabread. :slight_smile:

1 Like

Just curious, what was the fix?? :grinning:

2 Likes

It was just changing:

grid-template-columns: repeat(auto-fit, minmax(1fr, 10px, 1fr));

to

grid-template-columns: 1fr 10px 1fr;

Apparently, I was overthinking it. :slight_smile:

3 Likes