Help Understanding media query changes and div position

Hello, I’m having some trouble getting the media queries right for my product page.

Specifically, under the #specs div. There are two tables within the div that I would like to stack on a smaller screen.

When I do display: flex; flex-direction: column; it works when I do it in the regular section, but when I try to change it under media at the bottom, nothing changes.

I’m running into the same issue trying to get the button under the description on smaller screens.

Any suggestions?

One final issue i’m having is that I had to put the position of the #spec header to absolute in order to get it at the top of the div. But now it goes over top of the other content when I scroll. Is there another way to get it at the top of the div without using position: absolute; ?


1 Like

I took a peek at your table issue.

I couldn’t figure out exactly how to work that with flexbox without undoing much of what you had done already so instead I made a quick demo of some things that might work for you.

First box does not use media query at all and the other relies on media query for responsiveness. Resize pageview pane to see the tables stack at narrower screen.

Some of your positioning, floats and alignment styles are kind of working against flexbox. Maybe maximize what flex will do for you first and then put the little tweaks here and there afterwards watching for breaking changes.

Thank you very much! I appreciate the help. I’ll take a look at the demo.

You have errors that are causing non of the media queries to apply.

line 133: max-width: 10;0%;

Should be:
max-width: 10%;

line: 209 : Unclosed block

tr:nth-child(even) {
  background-color: #e6e6e6;

Should be

tr:nth-child(even) {
  background-color: #e6e6e6;

Wow, I can’t believe I didn’t notice that. Thank you!