Inconsistency between html file and codepen

1

I keep running into an issue in my product page where images scale differently depending on whether I’m viewing the output on codepen or viewing the .html document in Chrome. I’ve checked the zoom and done all the troubleshooting I could find on google and I’m still stumped. The code between the two instances is identical so I’m not sure what’s causing the discrepancy. To make matters worse, attempts to fix in one environment consistently seem to break it in the other. I have been able to find temporary workarounds but would like to find the root of the problem, as this seems unsustainable going forward. Any help is greatly appreciated!

Here is the page on codepen:

And here is a screenshot of how it appears within Chrome:

2

Are you using live preview in code pen to compare?

3

Sorry here is the screenshot

PNG
PNG1440×758 215 KB

and also a link to the html and css in a Drive folder

https://drive.google.com/open?id=1K3t7XTlJyP_Id6K5PfOfZPsMVo43im29

I

If that’s the default way of doing it then I most likely am. I’m not entirely sure though. The urls I am using include /pen/ or /full/. I don’t have pro so I’m not using any of those options.

4

image
image1902×979 329 KB

I downloaded your files from the google drive and this is what they look like in firefox. which is what they looked like codepen. What browser are you using?

1 Like
5

You’re CSSing the img tag twice

Change this:

  img {
      width: 100%;
      height: 100%;
      max-width: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-left: 20px;
  }

to this:

  img {
      width: 100%;
      height: auto;
      max-width: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-left: 20px;
  }

And delete this:

img {
      width: 100%;
      height: 100%;
  }

How I found this: I right clicked on one of the images and clicked inspect element. This brought up all the CSS declarations affecting the images. I changed height to auto and deleted the second IMG declaration in your CSS.

This worked in Chrome, Firefox dev, and in codepen in both.

1 Like
6

Thanks for the help everyone!

1 Like