How can I style this in CSS?

HTML & CSS
1

How can I style this with css:

 <div class="content pt_shadow" >

I’ve tried .content pt_shadow { … }

and .pt_shadow { … }

any help is welcomed

2

That second one should do it.
The first selector does not match that element.

1 Like
3

thanks for your reply.

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

<div class="content pt_shadow" style="background-color:#000000;">

but when I remove that style and add this to the 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 added background-color on mobile.

What am I missing?

4

When you use an in-line style, it will override styles in CSS.
The best option is to remove any in-line styling and put it all in CSS.
If that’s not an option you can resort to using !important, but that would be a ;ast resort for me.

5

Thanks again for your reply.
Yes, what I described earlier was that I removed the in-line style and added the responsive css, but saw no #800000 background color. So, I added this (below) to the top of file/page and still no background color.

<style>
  @media only screen and (min-device-width: 375px) and (max-device-height: 812px){
   .pt_shadow {
   background-color: red !important;
}
}
</style>

any other ideas are appreciated

6

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

What are you trying to target exactly?

If you are targeting small screens then use a max-width media query at about 600px.

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

However that still won’t work if you place the code before any original code for that element of the same weight. Or if you place that 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’d need to match that weight in your subsequent rule.

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

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

2 Likes
7

very helpful…thanks again

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.