CSS ...Media Query changes when brackets are removed

HTML-CSS
1

Hi!
I am building the technical page. I built mobile first, now I am building the desktop version. Every time I add a change code in desktop version it changes the mobile as well.
And…
on the line of: @media only screen and (max-device-width : 768px) { this outer set of brackets seems to be controlling whether or not the mobile version works . When I remove the brackets it works, when I replace them, it doesn’t work. Here’s the link…
https://codepen.io/barb1643/pen/vwPxZX?editors=0100

Some background…
I started the mobile version without stating the @media line, I added that when I was done. So is the code for the mobile go at the top of the css page or at the bottom?
Thanks in advance
Barbara

2

on tribute page the test is 2/2 some errors is there :thinking: finding out

3

I don’t understand, I’m working on the technical page.

4

  1. device-width is deprecated, you should use max-width/min-width. There are other Media features but max/min are the most commonly used.

  2. This is kind of a big topic to cover in a forum post and there are a lot of guides on responsive design and doing mobile first. It might be better to read up on this a bit. I would suggest only targeting the properties that need to change and think about when and if you need a media query. Using flexbox and CSS grid you can do a lot of the layout using very few media queries.

  3. One tool that can also be helpful is the Device Mode in the dev tools, it shows the breakpoints and you can see the relations between the breakpoints.

1 Like
5

Thanks for your response @lasjorg . I have been reading up on it, I’ve spent a lot of time trying to figure it out. I normally just add the media query changes at the end and everything works, but for some reason, this isn’t and I can’t find the mistake.
I will keep looking.
I didn’t know about the device-width deprecated, so that helps alot. Thanks for the device mode tip too.
So am I correct in saying the mobile version of the css should be placed at the top of the css page since it’s mobile first?

6

I removed the min-device-width and changed it to min-width etc and it now works. I thought that is where the problem was but just didn’t know that. Thanks so so much for your tips! @lasjorg
Barb

7

Guess I should have been a little more clear about that.

Few things:

  1. Using vw for the font size has its issues. If you really want to use that technique look into fluid typography. I should say, it can get a little complicated.

  2. On #navbar you have display: fixed; should be position: fixed;.

  3. You are not linking to the font correctly.

Under the Codepen settings add the link element to the "Stuff for <head>" section, under the HTML tab.

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">

Or add it as an import at the top of the CSS

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

The font-family should be declared like this:

font-family: 'Noto Sans JP', sans-serif;

8

Thanks! Here it is with all the changes and a little more…
https://codepen.io/barb1643/pen/vwPxZX?editors=1100