CODEWITHSUNDEEP
htmljekyll-theme
Ramakrishnan Kannan
Ramakrishnan Kannan

Reputation: 624

image width overridden by something else

Recently I moved my personal website to github.io and used jekyll's indigo theme. In one of my markdown page called about.md, I have the following tag.

<img src="../figs/foo.jpg" width="100%">

But this is overridden by another block.

.about img {
    width: 50%;
    margin: 0 auto;
    display: block;
 }

Because of which, the image I want to show for 100% is only displayed half of the page.

How will I override the .about img to show my image for 100%

Upvotes: 0

Views: 40

Answers (2)

Sujeet malvi
Sujeet malvi

Reputation: 385

You can use the style attribute with !important to set the image width as below :-

<img src="../figs/foo.jpg" style="width:100% !important;">

With this you should also look the width of the parent tag of this tag container

Upvotes: 1

Mr. Hugo
Mr. Hugo

Reputation: 12590

Your current inline image width uses the width attribute. To overwrite the CSS you should use more specific CSS. Replace the attribute by CSS/style, like this:

<img src="../figs/foo.jpg" style="width: 100%;" />

If you use the above, your inline CSS will win the specificity battle from the .about img selector.

For an easy to remember image about the specificity rules, look at Speci-FISH-ity.

Upvotes: 0

Related Questions