Hello all!
Im learning to use @Media Queries to make a website responisive/mobile-friendly.
In the desktop-version, I got a navbar below the pink logo. But in the mobile-version I want to hide this.
In the @Media Queries I´ve written ".navbar { display: none} "
It is not showing in the mobile-version, but the empty area is still there.
I want the picture to be closer to the logo on top. How do I fix this? Am I doing it right?
//
I did this conceptual html page.
It works perfectly.
Having data within or not doesn’t affect the result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#thingy {
width: 200px;
height: 200px;
background-color: red;
}
@media only screen and (width < 800px) {
#thingy {
display: none;
}
#main-nav {
display: none;
}
}
#main-nav li {
list-style: none;
display: inline-block;
}
#main-nav li::after {
content: " | ";
}
#main-nav li:last-child::after {
content: none;
}
</style>
</head>
<body>
<div id="thingy"></div>
<nav id="main-nav">
<ul>
<li>Home</li>
<li>Our products</li>
<li>Buy</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
<p>Hello World.</p>
</body>
</html>
Share your code to see what’s going on.
Mobile-version looks something like this at the time:
But I still want the yellow “booking” link to be visible between the logo and the image, but not the others. They can be but in a “dropdown” menu in one of the corners.
Updated code.
What I did is split the menu in 2 parts so that I can hide the part I don’t want to see anymore on mobile.
The about link is link your booking link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#thingy {
width: 200px;
height: 200px;
background-color: red;
}
#main-nav ul {
display: inline-block;
padding: 0;
}
#main-nav ul:first-child::after {
content: " | ";
}
#main-nav li {
list-style: none;
display: inline-block;
}
#main-nav li::after {
content: " | ";
}
#main-nav li:last-child::after {
content: none;
}
@media only screen and (width < 800px) {
#thingy {
display: none;
}
#not-on-mobile {
display: none !important;
}
}
</style>
</head>
<body>
<div id="thingy"></div>
<nav id="main-nav">
<ul id="not-on-mobile">
<li>Home</li>
<li>Our products</li>
<li>Buy</li>
<li>Contact</li>
</ul>
<ul>
<li>About</li>
</ul>
</nav>
<p>Hello World.</p>
</body>
</html>
800 px and above
Under 800px
Thanks for the reply! Very useful! 
But another issue showet up, while editing the layout for the desktop version.
I removed the boarder around the “Kontakt/Booking” item, and now the logo is suddently pushed to the right, and I have no idea.
Feels like I´ve tried “everything”.
Any tips?
The basic principles for both HTML and CSS are so easy to pick.
That’s why it is so easy to overlook.
Hence while I know those principles I end up myself looking up MDN quite frequently to understand any situation I face.
The killer tip I could give is become a good friend of the debug tools to understand your problem.
Ctrl+⇧+C will help you understand the structure of your code and why it is behaving the way it does. (Yes I note you know the tool as a screenshot testifies.)
For the little story when I tried to solve your problem yesterday I tried different solutions because my 1st attempt was not working the way I wanted. The media query did not make the “not-on-mobile” part (Hence de !important). Structurally too I did a few tries.
I am no wizard. I cannot guess how your code looks at the moment for you made changes since the last time. Also putting it here is nicer for anyone trying to help because that’s simpler to pick and try things. Screenshot would force one to type the code on their own. Help people help you.
It seems there are parts you don’t wanna share and that is perfectly fine. Then copy/paste your code in an editor and do the replacements there. For instance a useless link can be replaced by a # just like the other links.
Also HTML is very permissive. It displays content while you did not respect its syntax.
And looking again at your screenshots I think there are inconsistencies. You missed a closing </div> tag, I believe, in the part with your logo (according to the screenshot you shared).
Good luck.
Thank you so much for the feedback!
I´ve moved the inline-style over to the CSS-sheet. Don`t know why it was in there in the firs place, but thanks!
The reason I don`t share my whole code, is because a guy told me it was´nt that smart, to give away my code, for some reason, so I thought people did´nt do that. I got no problem sharing my whole code. It probably make you guys shiver anyway 
The
I notice the < hr > came up as an actual horizontal line in the post 
It is up to you to decide what part of your code is sensitive to share or not.
Sure if you’re up to develop a killer algorithm in your field it is understandable you don’t want to share your code. Then when you need help on some code you should try to prepare a sample concept code that is OK to share.
Now we are talking HTML, especially pretty basic HTML. Anyone will be able to see it anyways when it is live.
I dont think any of my code are sensitive. Except for maybe an email address
I dont know if I should start a new thread for every question, so I just post it here for now.
How do I properly target/chose a “class”? I thought it was as easy as .classname {…}
The reason I ask is this:
<header>
<div>
<ul class="navbar">
<li class="hvem"></li><a href="#">Hvem</a></li>
<li class="hvor"></li><a href="hvor.html">Hvor / Når</a></li>
<li class="media"></li><a href="#">Media</a></li>
<li class="kontakt"></li><a href=mailto:post@mail.no>Kontakt / BOOKING</a></li>
</li>
</ul>
</div>
</header>
I want to change the color for the last list item with the class-name of “kontakt”.
But “whatever” I do, it does not seem to work.
I´ve tried:
But nothing. What am I doing wrong here?
In your first post setting display: none will remove the the element from the normal flow of the document. I think the issue was the media query was using a comparison operator to check the size of the screen, like > < =. None of those are allowed. You seemed to fix this later in the mark up by using max-width, min-width, or width.
Sharing your code, for the front end of an application is not that big of a deal. Your website is going to be viewed on a client device, to do this the client will need to download all the resources needed to the client, so all your markup, css and js for the front-end will be viewable through the browser. Back-end is a little more precious and you should be careful about that.
You should start a new thread for each unrelated question. This will help people find your question, as well as help other users who try to search for related issues and resolutions to what they have.
There is nothing wrong with sharing your code in code blocks like you did above. I would recommend that you try sharing them with free online editor like https://codepen.io/ or https://jsfiddle.net/. You can simply copy and paste your code into one of those and copy a share link, that you can paste here. It just keeps people from having to set up an environment on their machine, and paste all your code. They can simply click the link and start testing right away. When they edit the code in the link it will create a copy for them, so they can work without changing yours. Then they can share a fix with you in the same manner. Makes life a little easier.
Did not realise that. But like the good old meme say: Works on my machine
Checking on MDN and W3Schools indeed not use any of inequality symbols. I wonder why it worked.
You are perfectly correct and it should work.
Did you check the CSS dev tools?
Do you see your style strikethrough?
It is likely conflicting with another style.
I would go with .kontakt a
You had extra closing </li> tags.
Try this:
<header>
<div>
<ul class="navbar">
<li class="hvem"><a href="#">Hvem</a></li>
<li class="hvor"><a href="hvor.html">Hvor / Når</a></li>
<li class="media"><a href="#">Media</a></li>
<li class="kontakt"><a href=mailto:post@mail.no>Kontakt / BOOKING</a></li>
</ul>
</div>
</header>
EDIT:
Just to benefit from our friend @MTownsend I just made a quick demo on CodePen.
This is basically what you want, right ?
I see you could fork it.
So play with it (don’t need fork but if you want to save I guess you’d need to.)
Thanks alot, guys!
