@media queries not working for responsive design?

I’m using the following CSS to try and make some text disappear from buttons when the window is small (e.g. on a mobile phone)

@media only screen and (max-width: 768px) {
.desktop-visible {
  display: none !important;
}

}

The buttons are made like this:

  <a class="item" href="{{ .Site.BaseURL }}" title="{{ i18n "home" }}" alt="{{ i18n "home" }}">
    <i class="large link home icon"></i>
      {{ if .Site.Params.textButtons }}
      <div class="desktop-visible" style="display:none;">
      &nbsp;&nbsp;{{ i18n "home" }}
      </div>
      {{ end }}
  </a>
  {{ if 

Example site (without the CSS applied yet): robot-one.github.io

Unfortunately, the CSS does nothing. I can manually set each button to disappear with inline style CSS, but trying to set it up as responsive flat out doesn’t work, and I don’t know why, as this seems to be the method all the tutorials follow.

Can anyone help me?

You might want to open the HTML document (with the CSS applied, of course) in your favourite browser and then check in its (the browser’s) developer tools, what’s going on. The developer tools allow to set different device dimensions (like iPhone, iPad), too. This is not related to Hugo.

As an aside: Why do you set the display for class desktop-visible to none in your HTML code and in your CSS?

1 Like

Why do you set the display for class desktop-visible to none in your HTML code and in your CSS?

:sweat_smile: That was a typo I didn’t mean to paste - when I was debugging, setting it to none worked when I tested it in the HTML, but nowhere else. Thank you for replying!

I’ve been examining everything via the devtools. CSS just doesn’t seem to get applied. I kinda hoped it would work on the desktop as I resize the window, but it does not.

website source code

I cloned your repo. And I can’t see desktop-visible in ANY of your source files. Which might kind of explain why you’re not seeing what you hoped to see.
So you’re off to a wild goose chase, I guess.

Local development version - I’ll push the changes to the remote repo asap. [slaps forehead]. Apologies; was distracted with some changes I’m making to a shortcode collection

So… er… this is awkward - I was cleaning up, commiting my changes to my theme, preparing to commit the changes to my website’s source code, and it randomly started working, after some other stuff mysteriously unbroke, as well.

I honestly suspect it was something to do with browser caching - broken code was stored by the browser, and only refreshed once I closed all incognito windows. I’ll finalise my changes and post back here.

It’s working. I just published an article I forgot in draft=true for a couple months, and the text buttons are fully responsive.

Future Reader, if your Hugo responsive design or other tweaks are mysteriously not working, try cleaning up and commiting your code, and test in a fresh Incognito/InPrivate window!

Close and reopen your browser, to force refresh the cache, which could contain old, broken code. Incognito’s cache is by definition temporary and open/close will force refresh it.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.