there is a page that contains information about the author. I'm trying to achieve the following result when scrolling the text: https://streamable.com/4cvcgq (This is a version of the application for iOS (made on Swift), I am making a web analogue).…
default padding of mat-button's, i need to subscribe the default padding (16px) I've been trying to set the padding of a mat-button, but the component's style isn't changing. What can I do, I've already tried changing CSS properties, but none…
I want the nav bar and header to just be at the top of the page but instead it stays on the screen as scrolling. Anytime i try to fix it it just sends the title to the side or…
i use this after in SCSS but i don't see anything. &::after { position: absolute; right: 0; top: 0%; width: 216px; height: 254px; transform: rotateY(180deg); background: url(../images/life_history.svg) center/contain no-repeat; }
I am trying to exclude some CSS rules when there is a defined CSS class as a parent with this rule: .cc div:not(.cc-ei) li { color: red; } But it doesn't work for all cases, as you can see in…
I am triying to do a card to showcase services. It only has a image and a little text. Nothing too fancy and not really difficult to achieve...But for some reason that i can't figure out, the image is not…
How to make .col element 100% of .container? .wrapper { max-height: 300px; display: flex; } .container { flex-grow: 1; display: flex; overflow-y: auto; overflow-x: hidden; gap: 10px; } .col { display: flex; flex-direction: column; flex: 1; gap: 10px; background-color: blue;…
For example here's the HTML code: <div class="topSection"> <div class="middleSection"> <p>This is some text in a paragraph.</p> </div> <div class="lowerSection"> <p>This is some text in a paragraph.</p> </div> </div> Here is the CSS .topSection{ .middleSection, .lowerSection{ padding: 20px; font-size: 20px…
I want to select the set of <li> elements that come before the one with the "active" class and not that are come after "active" class. <li></li> <li></li> <li></li> <li></li> <li class="active"></li> <li></li> <li></li> <li></li> <li></li>
<body> <p> <input type="radio" class="custom-radio-blue" checked /> Click me blue! </p> <p> <input type="radio" class="custom-radio-red" checked /> Click me red! </p> <style> .custom-radio-blue { accent-color: #01adef; } .custom-radio-red { accent-color: red; } </style> </body> In my code above why red…