How do I globally override ID specific css

[juliank-bc]

Hi

Client has created 50+ landing pages using the CMS. They decided very early on that default content width was too wide on desktop and have added 250 L and R padding in their rich text module settings.

After creating all these pages they decided to take a look on mobile - and, no surprises, it breaks display on mobile - content now limited to 10px wide.

The css added by HubSpot targets the specific rich text module ID on the page. Eg:

#hs_cos_wrapper_widget_1602652718788 {
  display: block !important;
  padding-left: 250px !important;
  padding-right: 250px !important;
}

To overide globally for all rich text modules, I've tried:

@media (max-width: 767px)
  div[id^='hs_cos_wrapper_widget_'] {
  padding-left: 10px !important;
  padding-right: 10px !important;
  }

}

But it doesn't take precendence over the HubSpot ID specific CSS.

Does anyone know how I might apply global padding for mobile in this case, to avoid editing every page they created?

Thanks

Julian

[juliank-bc]

Hi @Kevin-C 

I've found that the page editor inserts styles added in modules directly into the page header, so I can't remove the !important rule to be able to override it. Client will have to edit each page to fix.

Thanks for you help with this.

Cheers

Julian

[Kevin-C]

Hey @juliank-bc 

When you said "They decided very early on that default content width was too wide on desktop and have added 250 L and R padding in their rich text module settings." I inferred that the dev had done this manually, and that you would have access to it easily.

In an attempt to find the CSS I would use your browser's dev tools to locate the CSS on the live site. With that informtion you should be able to locate the CSS file rather easily.

Also based on that quote I would imagine that the CSS in question is located somewhere in the theme's folder structure.

[Kevin-C]

Hey @juliank-bc 

This isn't working because ID selectors have a higher specificity than attribute selector. See this page on CSS specificity.

The easiest way to handle this instance would be to do something specific ike this:

@media (max-width: 767px) {
  #hs_cos_wrapper_widget_1602652718788 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

To override globally, you could remove the "!important" rule from the ID's CSS:

#hs_cos_wrapper_widget_1602652718788 {
  display: block !important;
  padding-left: 250px;
  padding-right: 250px;
}

@media (max-width: 767px) {
  #hs_cos_wrapper_widget_1602652718788 {
   padding-left: 10px !important;
   padding-right: 10px !important;
  }
}

[juliank-bc]

Thanks for your reply @Kevin-C . Re your global override, I can't see where it is possible to edit the ID's CSS to remove the "!important" rule (its generated by HubSpot based on entries made in the page editor, it appears). Is there somewhere I can edit it?