Help with a div class & media query

I using a web video script and trying to modify a div class for a media query, but the script’s div class appears like this:

<div class="content pt_shadow pt_page_margin" style="padding-top: 10px; background-color: #ffffff; margin: 10px 0px 0px 0px;">

so, I tried a few attempts at creating a media query for that class, as I simply want it to appear lower in a mobile view, for example:

margin: 50px 0px 0px 0px;

but the script’s class name here has me stumped: content pt_shadow pt_page_margin

any guidance with this is appreciated

Hi there ChrisjChrisj,

media queries cannot override inline styling. :unhappy:

coothead

1 Like

You will need to use !important to override the inline styling.

Choose the pertinent class and add !important to your margin values.

e.g.

.content.pt_shadow.pt_page_margin{ margin: 50px 0 0!important}

2 Likes

Thanks for your replies, however I don’t understand the connection between !important and changing something for a mobile view.

And I don’t understand the name of this div class: div class="content pt_shadow pt_page_margin

any additional clarification will be appreciated

Hi there ChrisjChrisj,

this link…

Specificity - CSS : Cascading Style Sheets | MDN

…may provide some enlightenment. :winky:

coothead

1 Like

The html you showed is this:

<div class="content pt_shadow pt_page_margin" style="padding-top: 10px; background-color: #ffffff; margin: 10px 0px 0px 0px;">

That element has all these classes on it:

content
pt_shadow
pt_page_margin

When you add multiple classes to a div you space separate them.

e.g.

<div class="myclass1 myclass2">

If then you need to refer to that div using the multiple classes then you dot separate them like so.

.myclass1.myclass2 {background:red}

You can of course just target the above using the one class but it may be that you only want to target the element when it has both classes in place.

You have inline style rule in your div (stytle=“”):

<div style="padding-top: 10px; background-color: #ffffff; margin: 10px 0px 0px 0px;">

Inline styles like that win out over every other rule unless the rule has !important added to it. That’s why its very bad to use inline styling when not necessary.

Your media query would have no effect on that inline rule unless you qualify the value with !important (read the link @coothead posted).:slight_smile:

3 Likes

@ChrisjChrisj

As has been said here, using !important is bad form, but sadly sometimes unavoidable.
You can, however, use a [style] declaration in you rule, which makes it at least clearer why you are doing so. This also will work with greater specificity in some cases where !important alone fails.

@media only screen and (max-width: 400px){ .content.pt_shadow.pt_page_margin[style]{ margin: 50px 0px 0px 0px !important; } }

CodePen demo:

3 Likes

Nice :slight_smile:

1 Like

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