[BUG] - Host images are huge and inconsistently sized when the browser is small or mobile

[ctindel]

Even just looking at the sample app, the host images are nicely sized:

But once you drag the screen down to a smaller size or look on a mobile phone the images get much bigger and also are no longer the same size as each other.

[mattstratton]

Ah, that's a bug. I'll get the right CSS on those. I don't know how I've not noticed this one!

[mattstratton]

ah, so it's not really solveable with CSS; you want to make sure those host images are all the same. 500px square is the best. I am updating the exampleSite with proper images :)

[ctindel]

@mattstratton I don't understand. The theme is able to make the images a consistent size on the main page, why can't the theme make the images a consistent size when the browser shrinks?

[mattstratton]

it's because the image is set to fill the size; on the desktop view the size it has available is smaller, so bigger images are actually shrunk to fit. When it hits the mobile screen, it has the full width so if the image is bigger, it can take up all that space.

[ctindel]

Can you just give it less space on the mobile screen? I mean, it doesn't seem like there's any advantage to letting a host icon fill the screen that way in the first place and forcing people to manually crop images to make them all consistent seems like more work than a theme should force them to do.

I guess what I mean is, why stack them up like that full width one on top of the other instead of making rows of host images that are like 3 or 4 across? While the sample app is now consistent at least, I still wouldn't say it looks good. From a design perspective nobody expects a photo to get bigger when moving to a smaller screen size.

BTW, I just wanted to say I appreciate all the work you're doing on this and how responsive you are! I was surprised that there was only one hugo theme built for podcasts given how popular podcasts are but this one is great. These small tweaks you're making today are great though.

[mattstratton]

the person stacking like that is a pretty common way to display things like that on mobile responsive layouts, which is why I do it that way. And to be honest, I use this theme for a couple of my own podcasts, and that's my preference for the experience :)

I could see the argument for a two-across view of the hosts on mobile, so I might try with that and see how it looks.

[ctindel]

Or even just a configuration option for how many host images to put in one row on mobile would be great.

[mattstratton]

the tricky part of making that configurable is it's all done with css, so it's not something that really happens at hugo build time.

[mattstratton]

I also have to be quite cautious about making drastic design changes to the theme, as it's used by quite a few folks (that I know of, I know there are more) and changing the design is impactful.

just saying why I'm less quick to make overall design changes :)

[ctindel]

You could make the configuration option be the name of a css class to use I guess.

I agree doing it in a backwards compatible way is important to not mess up other people.

[mattstratton]

the thing is, changing how the host images display isn't just at the class level; the surrounding div has to change, and some other stuff.

I'm not against trying to puzzle this one out, just saying that it's not as easy of a change as it might appear, especially if I want it to be an override in config, etc

I definitely am not trying to come off argumentative, so I hope that isn't how this sounds! I'm mostly trying to be clear about my thought process.

and I tend to take the maintainer view of "no is temporary, yes is forever" when pulling in changes, etc.

[ctindel]

Its not how it sounds and I appreciate how responsive you are! I just like to throw ideas and see if they're palatable to others so don't read my messages as demands either. I demand you not to read them that way! :)

I suck at web stuff and css, that's why I love hugo so much and am so dependent on others with the skills to get it done. I love just being able to focus on the content and have the layout just work. But I also love not having to make specific sized images and it also just works. :)