Overriding style without !important in plain CSS

Question

I am designing a Google-AMP based webpage. There are some limitations of Google-AMP that css !important property can't be used.

In Google-AMP, a built-in style is using !important property as follows:

amp-sidebar {
  max-width: 80vw!important;
}

In my scenario I need to update a style max-width to 100vw. How can I update the amp-sidebar to 100vw without using !important?

PS: JavaScript or Inline-CSS can't be used. I need to make changes using only CSS.

Here is the fiddle..

can u override the built-in style which uses !important by using a parent container and referencing. eg. .parent-container amp-sidebar { max-width: 100vw !important; } — Franklin Pious, May 11 '18 at 19:16
@FranklinPious I have tried using parent container but not working. Also assigned another class later but even that doesn't worked. — Mutafaf, May 11 '18 at 19:19
You can't. AMP doesn't allow !important tags as they don't want to run the risk of something being broken. They use them and once something has !important you can't override it with your own styling.This is intentional on their part so you can't modify AMP components. — Craig Scott, May 11 '18 at 19:50
@FranklinPious here is the fiddle https://jsfiddle.net/mutafaf/cdb3dnqz/ — Mutafaf, May 11 '18 at 20:33

score 0 · Answer 1 · answered May 11 '18 at 19:19

0

The most precise selector will take the lead.

<div id="foo">
  <div id="bar">
    Hi
  </div>
</div>

#bar {
  background-color: green;
}
#foo #bar {
  background-color: blue;
}

Here, you will have a blue background!

So maybe you can build a rule with #parent amp-sidebar

answered May 11 '18 at 19:19

Almaju

Actually it does! Look at the inspector, you'll see in your jsfiddle that i takes the right property. You also need to add !important to the min-width to override the plugin property. https://jsfiddle.net/u3cy5mny/2/ – Almaju May 11 '18 at 23:19

score 0 · Accepted Answer · answered Aug 05 '18 at 20:43

I used padding on both sides left and right. So the div took full screen.

amp-sidebar {
  padding-left: 10vw;
  padding-right: 10vw;

}

So width allowed was 80vw + padding(left & right) 20vw = 100vw. That solved my problem.

Hope this helps you as well.

2 Answers2