Home › Q&A › Thread

hugo-xmin CSS

Hello

I read the "Contact me" section on yihui.org and I hope this is an appropriate place to raise this question.

I am quite new to CSS. I have been reading the Mozilla docs extensively in recent weeks. I am working on my own basic Hugo theme.

To get straight to my question: How is the hugo-xmin so successfully responsive to different screen sizes without using media queries? The text size displays perfectly whether on desktop or mobile.

In my own Hugo theme, when I use the dev tools in the browser, the text looks tiny on mobile. I believe I need to add some media queries to fix this, but I notice that your theme does not have any.

If you don't have time for a detailed answer, I understand. If there are any good resources on this topic, please direct me there.

Thanks for the help.

👍

1 Reply

yihui 1y ago

It's probably because you are missing this line in HTML: https://github.com/yihui/hugo-xmin/blob/a72100485da4f15d6d7a8aa84fe74d8514efbd3c/layouts/partials/header.html#L5

As you mentioned, hugo-xmin doesn't use media queries at all: https://github.com/yihui/hugo-xmin/blob/master/static/css/style.css For the font size issue, I don't think you need media queries.

👍

itswck 1y ago

Thanks a lot. That's exactly what I needed.

I now see that your solution is mentioned in the Mozilla docs here (strange that something so important is kind of hidden)

Thanks again.

yihui 1y ago

You are welcome! I was bitten by exactly the same problem several years ago.