Product Landing Page - Need help with media query

This is a total weak point for me, and I’m lost. How can I make all of my content show up in one column when viewed on a phone? In the media query, the only element doing what I want it to when viewed on a phone is #nav-bar.

https://codepen.io/lepros/pen/XWgdmdG

Hi @lepros
Firstly your header image is not displaying for me so you may wanna look into that.
Most of your page already seems like it’s 1 column so I assume you mean the header stuff you want to turn into a column. Quickest fix using the code you already have is to give your #header a
flex-direction:column;
Your iframe gets very small in the media query, I would change it to
width:50%; rather than max-width:50%;
Lastly you have a horizontal scroll bar going on when your media query kicks in. I would try to deal with that if you can.

Thank you. Any idea how to get the font size on the nav links to reduce? The styling I’ve tried for .nav-link in the media query hasn’t done anything.

Usually you would add the break points after the normal styling. Since your break point styling is at the beginning of the file it is being overwritten by the styling that follows it.

1 Like

OH MY GOSH. Something so simple and I had no clue. I just moved the media query to the end of the css and it’s working now. Thank you!

In the nav-link within the media query like this
font-size:20px!important;
Something is preventing it working normally but the important over rides it. You do have some bits of code competing with other bits

1 Like

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