Mixing
My media queries gets overwritten by normal css code [duplicate]
This question already has an answer here:
how to overwrite css style
6 answers
P.S: I'm using React for front-end and SASS for CSS that's why it's 'className' instead of 'class' and there are no brackets in my CSS.
It's not much to explain, basically whenever I try to for example show the burger menu on the table view, it never appears and stays display: none.
.logo__area-mobile
display: none
@media only screen and (max-width: 768px)
.logo__area-mobile
display: block
HTML:
<header>
<div className="header-search">
<div className="logo__area-mobile">
<button>☰</button>
</div>
<div className="header-search-input">
<i className="fas fa-search"></i>
<input type="text" placeholder="Est: Daredevil, Orange is the new black" />
</div>
</div>
<div className="header-menu">
<div className="menu">
<ul>
<li><NavLink to="/recently" activeClassName="is-active">مضاف مؤخراً</NavLink></li>
<li><NavLink to="/series" activeClassName="is-active">المسلسلات</NavLink></li>
<li><NavLink to="/movies" activeClassName="is-active">الافلام</NavLink></li>
<li><NavLink to="/" activeClassName="is-active" exact>الرئيسية</NavLink></li>
</ul>
</div>
<div className="logo">
<Link to="/">EgyMovs</Link>
</div>
</div>
</header>
css sass media-queries
asked Nov 20 '18 at 19:25
LaylazLaylaz
125
marked as duplicate by Community♦ Nov 20 '18 at 21:11
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 6 more comments
This question already has an answer here:
how to overwrite css style
6 answers
P.S: I'm using React for front-end and SASS for CSS that's why it's 'className' instead of 'class' and there are no brackets in my CSS.
It's not much to explain, basically whenever I try to for example show the burger menu on the table view, it never appears and stays display: none.
.logo__area-mobile
display: none
@media only screen and (max-width: 768px)
.logo__area-mobile
display: block
HTML:
<header>
<div className="header-search">
<div className="logo__area-mobile">
<button>☰</button>
</div>
<div className="header-search-input">
<i className="fas fa-search"></i>
<input type="text" placeholder="Est: Daredevil, Orange is the new black" />
</div>
</div>
<div className="header-menu">
<div className="menu">
<ul>
<li><NavLink to="/recently" activeClassName="is-active">مضاف مؤخراً</NavLink></li>
<li><NavLink to="/series" activeClassName="is-active">المسلسلات</NavLink></li>
<li><NavLink to="/movies" activeClassName="is-active">الافلام</NavLink></li>
<li><NavLink to="/" activeClassName="is-active" exact>الرئيسية</NavLink></li>
</ul>
</div>
<div className="logo">
<Link to="/">EgyMovs</Link>
</div>
</div>
</header>
css sass media-queries
asked Nov 20 '18 at 19:25
LaylazLaylaz
125
marked as duplicate by Community♦ Nov 20 '18 at 21:11
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
What's your HTML?
– jeanpaulxiao
Nov 20 '18 at 19:42
Hey @jeanpaulxiao just edited it, you can see the HTML now. :)
– Laylaz
Nov 20 '18 at 19:58
1
^^ and the html should be "class=" not "className="
– circusdei
Nov 20 '18 at 20:02
1
hey @disinfor sorry for not making this clear already, I'm using SASS for my CSS and React for my front-end so all my classes in HTML are called 'className' :)
– Laylaz
Nov 20 '18 at 20:03
2
In that case, can you post the compiled output?
– circusdei
Nov 20 '18 at 20:07
|
show 6 more comments
This question already has an answer here:
how to overwrite css style
6 answers
P.S: I'm using React for front-end and SASS for CSS that's why it's 'className' instead of 'class' and there are no brackets in my CSS.
It's not much to explain, basically whenever I try to for example show the burger menu on the table view, it never appears and stays display: none.
.logo__area-mobile
display: none
@media only screen and (max-width: 768px)
.logo__area-mobile
display: block
HTML:
<header>
<div className="header-search">
<div className="logo__area-mobile">
<button>☰</button>
</div>
<div className="header-search-input">
<i className="fas fa-search"></i>
<input type="text" placeholder="Est: Daredevil, Orange is the new black" />
</div>
</div>
<div className="header-menu">
<div className="menu">
<ul>
<li><NavLink to="/recently" activeClassName="is-active">مضاف مؤخراً</NavLink></li>
<li><NavLink to="/series" activeClassName="is-active">المسلسلات</NavLink></li>
<li><NavLink to="/movies" activeClassName="is-active">الافلام</NavLink></li>
<li><NavLink to="/" activeClassName="is-active" exact>الرئيسية</NavLink></li>
</ul>
</div>
<div className="logo">
<Link to="/">EgyMovs</Link>
</div>
</div>
</header>
css sass media-queries
asked Nov 20 '18 at 19:25
LaylazLaylaz
125
This question already has an answer here:
how to overwrite css style
6 answers
P.S: I'm using React for front-end and SASS for CSS that's why it's 'className' instead of 'class' and there are no brackets in my CSS.
It's not much to explain, basically whenever I try to for example show the burger menu on the table view, it never appears and stays display: none.
.logo__area-mobile
display: none
@media only screen and (max-width: 768px)
.logo__area-mobile
display: block
HTML:
<header>
<div className="header-search">
<div className="logo__area-mobile">
<button>☰</button>
</div>
<div className="header-search-input">
<i className="fas fa-search"></i>
<input type="text" placeholder="Est: Daredevil, Orange is the new black" />
</div>
</div>
<div className="header-menu">
<div className="menu">
<ul>
<li><NavLink to="/recently" activeClassName="is-active">مضاف مؤخراً</NavLink></li>
<li><NavLink to="/series" activeClassName="is-active">المسلسلات</NavLink></li>
<li><NavLink to="/movies" activeClassName="is-active">الافلام</NavLink></li>
<li><NavLink to="/" activeClassName="is-active" exact>الرئيسية</NavLink></li>
</ul>
</div>
<div className="logo">
<Link to="/">EgyMovs</Link>
</div>
</div>
</header>
This question already has an answer here:
how to overwrite css style
6 answers
css sass media-queries
css sass media-queries
asked Nov 20 '18 at 19:25
LaylazLaylaz
125
asked Nov 20 '18 at 19:25
LaylazLaylaz
125
edited Nov 20 '18 at 20:04
Laylaz
asked Nov 20 '18 at 19:25
LaylazLaylaz
125
asked Nov 20 '18 at 19:25
LaylazLaylaz
125
asked Nov 20 '18 at 19:25
LaylazLaylaz
125
125
marked as duplicate by Community♦ Nov 20 '18 at 21:11
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Community♦ Nov 20 '18 at 21:11
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
What's your HTML?
– jeanpaulxiao
Nov 20 '18 at 19:42
Hey @jeanpaulxiao just edited it, you can see the HTML now. :)
– Laylaz
Nov 20 '18 at 19:58
1
^^ and the html should be "class=" not "className="
– circusdei
Nov 20 '18 at 20:02
1
hey @disinfor sorry for not making this clear already, I'm using SASS for my CSS and React for my front-end so all my classes in HTML are called 'className' :)
– Laylaz
Nov 20 '18 at 20:03
2
In that case, can you post the compiled output?
– circusdei
Nov 20 '18 at 20:07
|
show 6 more comments
What's your HTML?
– jeanpaulxiao
Nov 20 '18 at 19:42
Hey @jeanpaulxiao just edited it, you can see the HTML now. :)
– Laylaz
Nov 20 '18 at 19:58
1
^^ and the html should be "class=" not "className="
– circusdei
Nov 20 '18 at 20:02
1
hey @disinfor sorry for not making this clear already, I'm using SASS for my CSS and React for my front-end so all my classes in HTML are called 'className' :)
– Laylaz
Nov 20 '18 at 20:03
2
In that case, can you post the compiled output?
– circusdei
Nov 20 '18 at 20:07
What's your HTML?
– jeanpaulxiao
Nov 20 '18 at 19:42
What's your HTML?
– jeanpaulxiao
Nov 20 '18 at 19:42
Hey @jeanpaulxiao just edited it, you can see the HTML now. :)
– Laylaz
Nov 20 '18 at 19:58
Hey @jeanpaulxiao just edited it, you can see the HTML now. :)
– Laylaz
Nov 20 '18 at 19:58
1
1
^^ and the html should be "class=" not "className="
– circusdei
Nov 20 '18 at 20:02
^^ and the html should be "class=" not "className="
– circusdei
Nov 20 '18 at 20:02
1
1
hey @disinfor sorry for not making this clear already, I'm using SASS for my CSS and React for my front-end so all my classes in HTML are called 'className' :)
– Laylaz
Nov 20 '18 at 20:03
hey @disinfor sorry for not making this clear already, I'm using SASS for my CSS and React for my front-end so all my classes in HTML are called 'className' :)
– Laylaz
Nov 20 '18 at 20:03
2
2
In that case, can you post the compiled output?
– circusdei
Nov 20 '18 at 20:07
In that case, can you post the compiled output?
– circusdei
Nov 20 '18 at 20:07
|
show 6 more comments
1 Answer
1
active
oldest
votes
Use more specific selector for your element.
Like 2 classes or tag name and class name.
Hint for count:
.a .b //00020
#id .a //00110 -- more specific, higher priority
answered Nov 20 '18 at 20:19
FoxFox
4011519
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use more specific selector for your element.
Like 2 classes or tag name and class name.
Hint for count:
.a .b //00020
#id .a //00110 -- more specific, higher priority
answered Nov 20 '18 at 20:19
FoxFox
4011519
add a comment |
Use more specific selector for your element.
Like 2 classes or tag name and class name.
Hint for count:
.a .b //00020
#id .a //00110 -- more specific, higher priority
answered Nov 20 '18 at 20:19
FoxFox
4011519
add a comment |
Use more specific selector for your element.
Like 2 classes or tag name and class name.
Hint for count:
.a .b //00020
#id .a //00110 -- more specific, higher priority
answered Nov 20 '18 at 20:19
FoxFox
4011519
Use more specific selector for your element.
Like 2 classes or tag name and class name.
Hint for count:
.a .b //00020
#id .a //00110 -- more specific, higher priority
answered Nov 20 '18 at 20:19
FoxFox
4011519
answered Nov 20 '18 at 20:19
FoxFox
4011519
answered Nov 20 '18 at 20:19
FoxFox
4011519
answered Nov 20 '18 at 20:19
FoxFox
4011519
4011519
add a comment |
add a comment |
What's your HTML?
– jeanpaulxiao
Nov 20 '18 at 19:42
Hey @jeanpaulxiao just edited it, you can see the HTML now. :)
– Laylaz
Nov 20 '18 at 19:58
1
^^ and the html should be "class=" not "className="
– circusdei
Nov 20 '18 at 20:02
1
hey @disinfor sorry for not making this clear already, I'm using SASS for my CSS and React for my front-end so all my classes in HTML are called 'className' :)
– Laylaz
Nov 20 '18 at 20:03
2
In that case, can you post the compiled output?
– circusdei
Nov 20 '18 at 20:07