Override inline css?

Question

I have css in my html code such as this:

 <img src="" style="width:500px;">

I want the image to be large on normal desktop/laptop screens.

But I want the image to be responsive on mobile.

I've got img in my css file set to width:100% at a certain screen resolution but my inline css code above seems to override my css in the styles file.

@media screen and (max-width: 720px) {
.container .row p img {
    width:100%;
}
}

Any ideas?

You can only override an inline style in CSS with an `!important` rule, otherwise you need JavaScript to change the style on the element. Read about specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — skyline3000, Jun 16 '18 at 15:02
I tried to answer, but it wouldn't let me. Using the !important tag will let the browser know that one is to be used. This should work @media screen and (max-width: 720px) { .container .row p img { width:100% !important; } } — Erik Russell, Jun 16 '18 at 15:04

score 4 · Accepted Answer · answered Jun 16 '18 at 15:03

4

You will need to use !important:

@media screen and (max-width: 720px) {
.container .row p img {
    width:100% !important;
}
}

answered Jun 16 '18 at 15:03

Matthew Moore

866
7
10

This was my first thought too but I didn't know if it was the right solution. Apparently, it is! – Thomas Jun 16 '18 at 15:15
1

Not a good practice to use !important. Also, if you are using inline CSS and !important, its good time to review, restructure your code to avoid inline CSS and !important. Refer https://css-tricks.com/when-using-important-is-the-right-choice/ – lifetimeLearner007 Jun 16 '18 at 16:01

score 0 · Answer 2 · answered Jun 16 '18 at 15:06

0

Using the !important tag will let the browser know that one is to be used.

This should work

@media screen and (max-width: 720px) {
.container .row p img {
    width:100% !important;
}
}

answered Jun 16 '18 at 15:06

Erik Russell

793
1
9
19

Override inline css?

2 Answers2