CODEWITHSUNDEEP
cssmedia-queries
Jen
Jen

Reputation: 101

How to get rid of margin property in media query

I've been trying to get rid of the top & right margin from this title. I have tried margin:0 & margin: none and it hasn't worked. Any suggestions would be appreciated.

 p.title {
  font-family: 'Germania One';
  font-style: normal;
  color: #FFF;
  font-size: 150px;
  Position:absolute;
  width:100%;
  z-index:1000;
  text-align:left;
  margin-top: 300px;
  margin-bottom: 0px;
  margin-left:200px;
}

@media (min-width:320px) and (max-width:425px) {

p .title{ 
  position:none; margin: 0 ; 
}

Upvotes: 1

Views: 5332

Answers (4)

Ashikul Islam Tamal
Ashikul Islam Tamal

Reputation: 1

//Remove the space from p .title{} and put the media query like that-

@media (min-width:320px) and (max-width:425px) {

p.title{ 
  position:none; 
margin-top: 0; 
margin-right: 0; 
}

}

Upvotes: 0

tao
tao

Reputation: 90148

The selector in your media query cannot override the selector preceding the media query because they are not the same. Change the selector inside your media query from p .title to p.title and it will work.

The (space combinator) in a CSS selector means the second part of the selector is a descendant of the first part, while chaining selectors without space it means the selector applies to the same element.

Therefore p.title selects any <p> tag with the class title, while p .title selects any element with the class title that is a descendant of a <p> element.

Here's the list of CSS combinators.

Upvotes: 2

germanfr
germanfr

Reputation: 562

You wrote p .title (with a space) instead of p.title inside the media query.

Upvotes: 0

Technohacker
Technohacker

Reputation: 735

You made a typo:

@media (min-width:320px) and (max-width:425px) {

    p.title{ /* No Space */
      position:none; margin: 0 ; 
    }
}

Upvotes: 0

Related Questions