Css media

How can I style this in CSS? – HTML & CSS – SitePoint Forums

How can I style this with css:

 

I tried .content pt_shadow { … }

and .pt_shadow { … }

Any help is welcome


This second one should do it.
The first selector does not match this element.



1 like

Thank you for your reply.

So, on the php/html page, I add this style to the class and it appears on both desktop and mobile:

but when I remove this style and add it to file/page (between style tags):

  @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
   .pt_shadow {
   background-color:#800000;
 }
   }

I don’t see the background color added on mobile.

What am I missing?

When you use an inline style, it will override the styles in CSS.
The best option is to remove all inline styling and put everything in CSS.
If that’s not an option, you can use !importantbut that would be a last resort for me.

Thank you again for your answer.
Yes, what I described earlier was that I removed the inline styling and added the responsive css, but I didn’t see anything #800 000 Background color. So I added this (below) to the top of the file/page and still no background color.


any other idea is appreciated

This media query is nonsense because it’s too specific and device width and height are deprecated anyway and shouldn’t be used.

What exactly are you trying to target?

If you’re targeting small screens, use a max-width media query at around 600 pixels.

@media screen and (max-width: 600px) {
  .content.pt_shadow {
    background-color: red;
  }
}

However, it still won’t work if you put the code before any original code for that element of equal weight. Or if you place this code after the original code but the original code has more weight.

For example, if the original code was #section .content.pt_shadow {}, then you will need to match that weight in your next rule.

The easiest way is to look in devtools and find the rule that applies to the original and copy it from the devtools panel and then use it.

!important should only be used to override inline styles or other really special cases. It is not used because you don’t know why you need it.:slight_smile:



2 likes

very helpful… thanks again



1 like

I also wanted to know how I can add this with CSS in my Hindi Blog so I can style this.