Overridding inline CSS

Question

I’m not optimistic about finding a solution, but thought I’d ask here as a last ditch effort.

So I have a side by side question and I wanted to style the columns specific sizes because by default in Simple layout the columns have some inline styling doesn’t work well for the data I have in those columns. And I am attempting to override those inline styles, but what already I’ve tried hasn’t worked.

My attempt is the div.sticky-container.sbs-table CSS. And if I uncheck the first grid-template-columns under element.style, then mine seems to work. But even when I try to apply important! to mine it still doesn’t override the inline CSS.

I’m not sure what else I could try. When I attempted adding the important! it gave me a little error and since it wasn’t accomplishing anything, I removed it.

chackbusch · Accepted Answer

@courtrcSince inline styles are hard to override with just CSS, a common approach is to use JavaScript to remove or change the inline styles directly. Please try to add this JavaScript for your question in the addOnReady method:var table = document.querySelector('.sticky-container.sbs-table');   if (table) {     table.style.gridTemplateColumns = '125px 225px 200px 200px 125px 200px';   }Another approach is to increase the specificity of your CSS selector, although this might not always work against inline styles. An example could be this custom CSS:.question-content > .sticky-container.sbs-table {   grid-template-columns: 125px 225px 200px 200px 125px 200px !important; }BestChristian

courtrc · Answer

@chackbuschAmazing thank you for both options! I was trying to increase the specificity but I didn’t have the > in there. Appreciate your help so much!

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded