Tribute Page: Need help with flexbox & media query

Hello everyone,
I am nearly done with the tribute page but I can’t figure out how to make the media query work and make the .tribute-info-flex-item full-width and stack them when seen on a screen below 500px. For some reason, the code I wrote is not working.
This is the link to my project:
https://codepen.io/miliberlin/pen/yLBKXdq
I would appreciate any suggestions.

1 Like

Hello,

Hmm…it seems fine to me.

What does it look like to you? A screenshot might help.

Thanks for having a look!
On my end, the media query somehow never gets applied.

53

Another screenshot with the width:

1 Like

I’m using Firefox, maybe that’s why it’s fine on my end.

I’m not that great at solving cross-browser issues but I’ll take a stab at figuring it out anyway.

Hopefully, someone else can chime in and look at it too.

It’s working when I’m in the detail view in code pen, but not working in any other view (tested in Chrome and Safari). Doesn’t work when I open my local html file in the browser either.

1 Like

Funny enough, I managed to reproduce the issue once on Brave (Chromium based) but after that, it didn’t happen again. Seems fine on both Firefox and Brave.

And it works locally as well if I boot it up from VS Code; it doesn’t work if I open the HTML file directly with a browsers.