Issue with Green Color Not Applied to All H3 Headings
Hello everyone. Why the green color is not applied to "all h3 headings". Thank you.
Hello everyone. Why the green color is not applied to "all h3 headings". Thank you.
mourad well I wish I had an answer for you but I really really dont. I have not been this puzzled in a long time. All that I can think of is that this is a webflow bug because there is no reason for why this shouldn't work. In a brand new style guide, I made all the same changes you have to this style guide and everything works as expected....maybe try a new file? https://webflow.com/made-in-webflow/website/relume-library-styleguide If you could publish this file and send me the published URL - I can use inspect element to try to track down some styles but I really dont think I would come up with anything.
Matt J. Thank you so much for your time and help. Is it okay if I delete the global style? Because when I delete it, everything works perfectly fine. Here is the published link : https://emptymedia-34d8aa.webflow.io/style-guide
In my version of the style guide, it looks like this though, so I'll have to confirm with the team on which one it should be.
you will want to keep the global styles embed because it has a lot of other styles you will need for the project.
Ok, thank you. I appreciate your help. I think I'll create a new file and try again.
mourad so I think you are in the right file and I think that body color inherit that you have is correct. The intention with this CSS addition is that you would control the color of headings from their parent elements. So lets say you have a section with a white background, you'll see the text color to black on that section and lets say you have a section with a black background, you would set the text color to white on that section - hopefully this makes sense. This change was done in anticipation for future releases.
I got the idea. But I think I will continue with this color in the headings.
I'm using the old gloabal styles - It's working fine -- <style> /* Set color style to inherit */ .inherit-color * { color: inherit; } /* Focus state style for keyboard navigation for the focusable elements */ *[tabindex]:focus-visible, input[type="file"]:focus-visible { outline: 0.125rem solid #4D65FF; outline-offset: 0.125rem; } /* Get rid of top margin on first element in any rich text element */ .w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child { margin-top: 0 !important; } /* Get rid of bottom margin on last element in any rich text element */ .w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child { margin-bottom: 0 !important; } /* Prevent all click and hover interaction with an element */ .pointer-events-off { pointer-events: none; } /* Enables all click and hover interaction with an element */ .pointer-events-on { pointer-events: auto; } /* Create a class of .div-square which maintains a 1:1 dimension of a div */ .div-square::after { content: ""; display: block; padding-bottom: 100%; } /* Make sure containers never lose their center alignment */ .container-medium,.container-small, .container-large { margin-right: auto !important; margin-left: auto !important; } /* Make the following elements inherit typography styles from the parent and not have hardcoded values. Important: You will not be able to style for example "All Links" in Designer with this CSS applied. Uncomment this CSS to use it in the project. Leave this message for future hand-off. */ /* a, .w-input, .w-select, .w-tab-link, .w-nav-link, .w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link { color: inherit; text-decoration: inherit; font-size: inherit; } */ /* Apply "..." after 3 lines of text */ .text-style-3lines { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* Apply "..." after 2 lines of text */ .text-style-2lines { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Adds inline flex display */ .display-inlineflex { display: inline-flex; } /* These classes are never overwritten */ .hide { display: none !important; } @media screen and (max-width: 991px) { .hide, .hide-tablet { display: none !important; } } @media screen and (max-width: 767px) { .hide-mobile-landscape{ display: none !important; } } @media screen and (max-width: 479px) { .hide-mobile{ display: none !important; } } .margin-0 { margin: 0rem !important; } .padding-0 { padding: 0rem !important; } .spacing-clean { padding: 0rem !important; margin: 0rem !important; } .margin-top { margin-right: 0rem !important; margin-bottom: 0rem !important; margin-left: 0rem !important; } .padding-top { padding-right: 0rem !important; padding-bottom: 0rem !important; padding-left: 0rem !important; } .margin-right { margin-top: 0rem !important; margin-bottom: 0rem !important; margin-left: 0rem !important; } .padding-right { padding-top: 0rem !important; padding-bottom: 0rem !important; padding-left: 0rem !important; } .margin-bottom { margin-top: 0rem !important; margin-right: 0rem !important; margin-left: 0rem !important; } .padding-bottom { padding-top: 0rem !important; padding-right: 0rem !important; padding-left: 0rem !important; } .margin-left { margin-top: 0rem !important; margin-right: 0rem !important; margin-bottom: 0rem !important; } .padding-left { padding-top: 0rem !important; padding-right: 0rem !important; padding-bottom: 0rem !important; } .margin-horizontal { margin-top: 0rem !important; margin-bottom: 0rem !important; } .padding-horizontal { padding-top: 0rem !important; padding-bottom: 0rem !important; } .margin-vertical { margin-right: 0rem !important; margin-left: 0rem !important; } .padding-vertical { padding-right: 0rem !important; padding-left: 0rem !important; } /* Apply "..." at 100% width */ .truncate-width { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Removes native scrollbar */ .no-scrollbar { -ms-overflow-style: none; overflow: -moz-scrollbars-none; } .no-scrollbar::-webkit-scrollbar { display: none; } </style>