CODEWITHSUNDEEP
htmlcssresponsive-design
Rexona Runner
Rexona Runner

Reputation: 11

Why is my responsive CSS not working in this code?

I have the following HTML code:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

    <body style="background-image:url('images/background-website-web-blue.jpg');background-size: 100% 100%;background-attachment:fixed;">
    <div class="content1" style="background-color: rgb(52,129,162,0.8); box-shadow: 10px 10px 10px rgba(0,0,0,0.8);" >
        <div class="container" style="text-align:center;">
            <div class="jumbotron" style="background-color: transparent;"></div>
                <p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 40px; font-weight: 700;" >dockdockdock</p>
                <p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 25px; font-weight: 400; font-style: italic;">dockdcokdock</p> 
                <p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 40px; font-weight: 400; line-height: 52px;" >DUck duck duck duck <i style="color: red; font-weight: 700;">60 Hari</i> Bergabung Di Ecourse Ini</p>
                <br><br><br>
            </div>
        </div>
    </div>
  </body>
</html>

and CSS:

@media only screen and (max-width: 600px) {
  p{
    font-size:5px;
  }
}

But why don't the <p> tags change into size 5px when media 600px or smaller?

And if I put the <p> tags above <div> it's working

Upvotes: 1

Views: 526

Answers (3)

caramba
caramba

Reputation: 22490

Because the specificity of inline style is ranked much higher then just CSS

If you want your css for mobile to work with given HTML you need to add !important like

@media only screen and (max-width: 600px) {
  p {
    font-size: 5px !important;
  }
}

Then it will work.

But to be honest, we should never use !important. That can be achieved easily in this case just move all your inline styles from HTML to the top of the CSS file

Working example with !important https://jsfiddle.net/nvzupxb0/

Working example with CSS only https://jsfiddle.net/nvzupxb0/2/

Notes on the CSS only solution

  1. had to add some classes on <p> tags because your markup didn't allow me to use :nth-child() pseudo selectors
  2. removed the <br> tags from the last (.third) p tag because line brakes can be achieved with CSS padding-bottom. giving the advantage of changing the padding-height via CSS for mobile devices!

Upvotes: 2

Pixel Time
Pixel Time

Reputation: 78

you can create a media query and make the paragraph with 5px !important.

@media (max-width: 600px) {
p{
  font-size: 5px !important;
}

}

Upvotes: 0

Ashish chakravarti
Ashish chakravarti

Reputation: 69

Just move you inline css which is given in p tag to external css file or you can write !important like this - 

@media only screen and (max-width: 600px) {
    p{
      font-size:5px !important;
    }
  }

Upvotes: 1

Related Questions