This is a bit of a two-parter.

First issue:

I’ve written some custom HTML/CSS/JS for a friend’s WordPress site in VS Code. The images he’s provided are in a Google Drive. I linked them in the HTML and they were displaying nicely on my locally hosted render (I use the GoLive plug-in for VS Code). I set a height of 250px for each image and they displayed just as I was expecting. Here’s an example of what I’m intending it to look like:

Local VS Code render

The intrinsic size of the images are 600×1200, and the intrinsic aspect ratio is 1:2. The rendered size is 125×250, and the rendered aspect ratio is 1:2.

We used WPCoder to add the custom HTML/CSS/JS to the site, and it generated a shortcode that we put in place where we want the code to appear, and as expected, some of the CSS needed to be adjusted but the images are rendered at all sorts of different sizes and aspect ratios.

For example:

Hosted on WordPress

As you can see, the only image that rendered exactly as intended is the first one, top-left (Bushmills).

Second issue:

I’ve kept the image sizes the same throughout optimizing for mobile, so as the viewport gets smaller, the images stay the same size (125×250) but on the WordPress site, the images respond to the changing viewport size.

I uploaded a couple of images to the WordPress media library and tried to link them from there and still had the same issue.

Here is an example of what the HTML looks like for the images. The menu is laid out using CSS Grid with each bottle image, title, description and price being a flex container with two children (the image and then the title/description/price):

<div class="selection-details">
            <div class="btl-img">
              <img
                src="https://drive.google.com/thumbnail?id=1MiSZnlLwbjCCVndZ-Mgk6zGAgFkpRzmG&sz=w1000"
                alt="Bushmills bottle"
                height="250px"
                class="product-img"
              />
            </div>
            <div class="btl-details">
              <div class="btl-title">
                <p>Bushmills</p>
              </div>
              <div class="btl-description">
                Smooth toffee, vanilla, honey & dried fruit
              </div>
              <div class="price">$8.00</div>
            </div>
          </div>

My friend is using Elementor page builder and I was playing around in dev tools to see what might be affecting the images rendering differently and couldn’t find anything. I spent a good amount of time on Google and this website and had a hard time narrowing down my search results.

I appreciate any advice or pointing me in the right direction.

Thank you!