How to change css style for only one image in specific page in wordpress?

Question

For all the images by default the below style class is being set.

.figure {
    display: inline-block;
    vertical-align: top;
    position: relative;
    max-width: 100%;
}

I am trying to change display: inline-block to display:inherit only on a particular page. I added the image via visual composer in WP,and tried adding a new class for the image div by adding the style needed, but still the display:inline-block remained the same.Any solutions will be appreciated.Thanks.

Did you try to use !important at the end of the value of the display in the new class? — Iago
– Iago, Commented Oct 19, 2015 at 7:03

Mitul · Accepted Answer · 2015-10-19 07:05:37Z

1

please add inline css and check its working or not?

If its working then add new class and add that class end of the css and try it will work

Like add inline-img this is the new class then add following css to end of your css file

.figure.inline-img{
 display:inherit;
}

answered Oct 19, 2015 at 7:05

Mitul

3,4372 gold badges25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sanjuktha Over a year ago

When i add the style on inspect element it's working,but when i write in style sheet and add the class it's not working,will that be a problem with my stylesheet?

Mitul Over a year ago

Yes the problem is with the stylesheet loading order when you want to overwrite the existing css class then you need to include at last.

Mitul Over a year ago

In which CSS you have .figure class and in which Css you have added new .figure.inline-img class?

Sanjuktha Over a year ago

ohh... the .figure is in theme.css,and i added the new class in style.css via the editor.

Mitul Over a year ago

Please add the in theme.css at end of the file.

Alvin Pascoe · Accepted Answer · 2015-10-19 07:34:32Z

0

If you've added a custom style to the figure (you mentioned a .pax class), then you simply need to specify the following in the CSS:

.figure.pax{
  display:inherit;
}

If that doesnt work, you can either add specificity to the selector (my preference) or add !important as follows:

.figure.pax{
  display:inherit !important;
}

(Alternatively, if you'd like the image to be display:block which is what it looks like you'd like, use display:block instead of display:inherit)

edited Oct 19, 2015 at 7:34

answered Oct 19, 2015 at 7:28

Alvin Pascoe

1,2098 silver badges5 bronze badges

1 Comment

Alvin Pascoe Over a year ago

@sa-7 - Excellent, glad it helped!

Collectives™ on Stack Overflow

How to change css style for only one image in specific page in wordpress?

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related