cssgoogle-amp

Overriding style without !important in plain CSS

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..

https://jsfiddle.net/mutafaf/cdb3dnqz/

Solution

  • 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.