Hugo

Why does image not appear in mobile (Hugo-Academic)

My site uses the Hugo-Academic theme. The main page has a background image that does not show up in the mobile version. Actually, it looks like it might be showing up but so zoomed in on a small part of the image that it just looks like a mottled grey background.

The site is here: https://www.crediblecorvid.com

I think this post is probably relevant, but I don’t know which CSS file I’d need to look at or how to override it to fix this specific issue.

Hiya! The Academic theme was created by @neutreno. It has a dedicated issue queue and community chat.

You may have the same problem I just had. Actually a very small piece of your image is being displayed, but it looks all black. It’s caused by the parallax effect. To fix it, I had to create a layouts/partials directory and copy themes/academic/layouts/partials/widget_page.html into it so that I could modify the line where parallax effects are put on the background image. I removed " {{if $bg.image}}parallax{{end}}" from line 69. That resolved the issue for me.

It was not obvious to me that the developers put in any way to turn off the parallax effect for background images, but I don’t know enough to be sure.

69c69
< <section id="{{$hash_id}}" class=“home-section {{printf “wg-%s” (replace $widget “_” “-”)}} {{if $bg.text_color_light}}dark{{end}} {{if $bg.image}}parallax{{end}} {{with $css_classes}}{{.}}{{end}}” {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>