-1

Context may or may not be important here: I'm using Ghost on Github Pages via Buster. Buster is a tool that generates a static site from a local Ghost blog, so that it can be hosted properly on static site hosting. The blog post I'm looking for help with is hosted here: http://dresscode.danhakimi.com/why-i-love-belted-coats-and-cinched-waists/. Inspecting elements seems to work pretty effectively, and more effectively than I could copy all the relevant HTML, CSS and Javascript over here. As a disclaimer: I wrote none of this code, and am not a developer by trade, but have played enough with web frontend technology that I should be able to understand most of what's going on.

Aside from one detail I'll touch on later, this works well in Firefox on multiple platforms, and in Internet Explorer. In safari, the images show, but can't seem to set height correctly, at least on my laptop -- at full screen, the images are stretched out, but they respond nicely as I change the window's height. So I'm pretty sure the problem involves the way different browsers process adaptive heights... But I have no idea how to handle that.

The strange thing is what happens in Chrome (on both desktop and android): the images aren't visible at all. I go in and inspect element, and... the only way for me to get images to show is to set the height on kg-gallery-row to a fixed pixel count. Obviously, that's not a practical solution -- I want the heights to set responsively, properly... I've seen a lot of guides talking about setting the flexbox height to 100%, but that isn't doing anything, no matter where I do it.

The last detail worth considering -- although it's a less significant issue -- is that none of the zoomable boxes open correctly, locally or on production, in any browser. They seem to be targeting some area much further down. If you can help with that, I appreciate it, but the priority is just getting the galleries to show.

Daniel
  • 2,956
  • 2
  • 15
  • 12
  • 1
    When I view in Chrome, I get an error message in the console: `Mixed Content: The page at 'https://dresscode.danhakimi.com/why-i-love-belted-coats-and-cinched-waists/' was loaded over HTTPS, but requested an insecure script 'http://s.imgur.com/min/embed.js'. This request has been blocked; the content must be served over HTTPS.` - – disinfor Jan 18 '20 at 17:32
  • The galleries I'm referring to aren't imgur galleries. I'll work on that, though. Thank you. – Daniel Jan 18 '20 at 17:44
  • 1
    You can set the `height` property of the images to `auto`: `.l-post-content figure .kg-gallery-image img { display: block; margin: 0; width: 100%; height: auto; } ` I'm not sure why Chrome is setting the initial height of the image to 0, but because you had the height set to `100%`, it will be `100%` of it's container - which in this case was 0. Setting to `auto` will also avoid the image stretch – disinfor Jan 18 '20 at 17:49
  • Heyyyy that worked! I guess I didn't try messing with the image itself, just the div immediately around it. Now I just need to figure out the zoom nonsense! Can you post that as an answer so I can give you points for it? – Daniel Jan 18 '20 at 19:56

1 Answers1

1

Per request of an answer:

You can set the height of the image to auto.

.l-post-content figure .kg-gallery-image img { 
    display: block; 
    margin: 0; 
    width: 100%; 
    height: auto; 
}

It looks like Chrome is setting the container height to 0. So, if you have your image height set to 100%, that means 100% of it's container height - which is 0.

Setting the height: auto will set the height in relation to the image itself. This will also solve your stretching issue.

disinfor
  • 10,865
  • 2
  • 33
  • 44