Image isn't centered on mobile view in chrome dev tools

support
1

Hello,

I’m using the zen theme (link). I’m trying to use the figure shortcode to center an image. It works in the desktop view, but it doesn’t work in the mobile view in chrome dev tools. When running hugo with --bind and viewing the site with my phone - the image is still not centered, so I don’t think it’s an issue with Chrome dev tools.

If it makes any difference, my website it in Hebrew, which is aligned right-to-left.

My code:

{{< figure src="/banner.png" alt="Banner image" class="center" width="300" >}}

What I see on mobile view (using chrome dev tools):

Screen Shot 2022-05-06 at 15.32.14
Screen Shot 2022-05-06 at 15.32.14447×813 90.1 KB

What am I doing wrong?
Thanks!

Versions:

$ hugo version
hugo v0.94.2+extended darwin/amd64 BuildDate=unknown

Zen theme: I’m on commit 6e664875f1b7e2124ba10e7f08a40706270ea6c3 from 6 weeks ago.

As it says in the theme’s description, mentioning the theme author: @frjo.

2

One additional find: When I set custom resolution, I found that up until 665px of width - centering the image isn’t working. But, from 666px and above centering does work.

3

This is CSS from the _zen.scss file, see below. You can copy it to your root asset dir and adjust as needed. Or just, add a blank _zen.scss to clear “zen” the styles completely. They just are some styles I tend to use often so have them included.

4

@frjo: Thanks!

Yes, those CSS files are useful!
It’s my lack of familiarity with how this work.

Looking at this part from the file that you’ve linked:

      &.center {
        margin-left: auto;
        margin-right: auto;
      }

I don’t see anything there which could indicate that center wouldn’t work for the mobile case. Do you happen to know what could cause this?

Thank you!

5 
@include respond-to(s) {
…
}

Everything inside the “respond-to” is only active for screens bigger that size “s”. Believe that is set to 666px per default in the themes styl.

1 Like
6

That worked! Thanks! I changed that to xxxs.

This solved my use case - but I think I’m missing the reasoning behind this. Why did you set the default to respond to s and above?

7

You might have more success discussing the subleties of CSS, media queries and responsive design in places dedicated to web design.

8

@chrillek : That makes perfect sense. Can you recommend such places?
(For context: This is my first time dealing with CSS, trying to build a website for my wife. I’ve spent most of my professional time working on very different areas.)

9

Frankly, I’d start without a theme. Giving you more control (or rather less code to wade through) and avoiding a technology stack that you don’t know (like the CSS preprocessor used here).

is full of CSS details, but not necessarily a good place to start learning it. You might want to check out MDN (Mozilla Developer Network) or simply throw “CSS tutorial” at your favorite search engine.

1 Like
10

The Zen theme is the theme I use as a base for all my Hugo projects. It has the styles I personally want. The _zen.scss I almost always clear out on customers sites, they are for my private sites.

It is not ment to be used as it, it is very plain. It is built to be a good solid base to get on started when implementing a design for a site.

2 Likes
11

Here in my case, images are NOT loaded any more…
But, zen is a good theme…