How to work with @media in css?

Question

How to work with @media in css?

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Greeting for all,

I'm new to programming in Frond-End, and I'm beginning to learn how to tinker with @media to apply keying on a simple page, but what would cheating be?

I created a responsive site when the page is more than 991px in width it appears the menu, but when it has less than 991px it appears a three bar icon, and if the user wants the menu to appear below 991px it you will have to click on the icon to appear the menu, as shown in the figure below;

Menu above 991px;

Nowthemenubelow991pxwithoutclickingtheicon.

Nowthemenuwhenyouclicktheicon.

WhatIreallyneedistochangeandstriptheunderlinewhenImovethemouse,thepartofthecoderesponsibleforthiswouldbethis;

@media(max-width:991px){.menu{position:fixed;top:0;left:0;bottom:0;width:200px;display:none;background-color:#bfbfbf;border-right:1pxsolid#eee;}.menua{text-decoration:none;}.menu--exibindo{display:block;}.menu_item{display:block;line-height:3;}}

Morespecificallythispartofthecodereferringtowhatwasshownrightup;

.menua{text-decoration:none;}

Theproblemisthatthiscodeasshownabovedoesnotchangethemenu,itwastodo,IdonotknowwhereIamwrong.

IwillleavemycompletesourcecodeavailableatGitHubforfurtherclarification.

ENOUGH CLICK HERE

html5 css

asked by anonymous 01.07.2016 / 01:22

2 answers

1

Actually, your problem is not in the media query. To change the underline property when you hover the mouse, you have to select the hover attribute of CSS (which is the responsible stylization for when the elements will have the mouse over them)

Your code inside the media query has to look like this:

.menu a:hover{
    text-decoration: none; 
}

01.07.2016 / 16:48

Calendar datepicker bootstrap with error in year bisexto Display text field in dbgrid Delphi

score 1 · Accepted Answer

If you want to remove the underline from the side menu that appears when you click on the responsive menu icon, you simply have to use css: (downloaded and worked in localhost)

@media (max-width: 991px){
.menu a {text-decoration: none;}
}

If you want to remove this underline from the menu on larger screens, use css:

.menu a {text-decoration: none;}