How to switch SCSS format when copying with eCSStractor?
I do not know how to disable SCSS class format for now. I want to switch from this : .header { &__row {} &__logo {} &__nav {} } to this : .header__row { } I tried to look in the…
Html – How to position a SVG icon inside switch button?
I have a switch component and I need to place an SVG icon inside the switch ball. The problem is that I'm not able to position this SVG. It is being hidden behind the circle, and when I switch between…
Html – Why are the distances different?
I have these codes in SCSS and HTML (Astro) <header class="mainHeader"> <a href="/"><img src="/images/mainLogo.png" alt="Логотип " id="headerLogo"></a> <div id="links"> <a href="/products">Продукты</a> <a href="/sale">Акции</a> <a href="/contacts">Контакты</a> </div> </header> .mainHeader { background-color: var(--white); display: flex; align-items: center; justify-content: center; #links { margin-left:…
Html – How do I place an element relatively to an image using background-image and ::before/::after?
I'd like to position an element (using ::before/::after) relative to an image (using background-image), but it doesn't seem to work. If I add position: absolute to &--right::after will the &--right element be the closest parent with position relative? I mean…
Javascript – Add extra grid size in React Bootstrap 5
Is it possible to add an extra size to react bootstrap? Right now the bootstrap sizes are as follows: WPW Container Max-Width sx < 576px - none sm > 567px - 540px md > 768px - 720px lg > 992px…
How to do form css same like bootstrap
I am trying to do the css for form same like bootstrap, I mean without bootstrap. I have copied all the related css from bootstrap, But it is not working same like that. How to do it? Bootstrap Form CSS:…
Css – justify center not in center position
i am creating a simple stepper component in vue. I have been able to achieve desired fucntionality but the alignment goes to left even after applying justify-content: center below is my code https://codesandbox.io/s/awesome-sky-pj9p5x <template> <div class="flex justify-center full-width" style="border: 1px">…
Html – Footer is on top. Any solutions without adding a wrapper?
How to make a footer always pressed to bottom? Whenever I make a new page and there's still no content, considering that my header is fixed, my footer always jumps to top. I want to get rid of this behavior.…
Css – order items that are group of two on display flex
Im trying to make the next grid of elements using flex on desk: 1 2 3 4 5 6 they are group of two items per container like this: <div class="descriptionElements"> <div class="itemsContainer"> <div class="itemDescription"> <div class="descriptionItemSection"> <span class="titleItemDescription">item-1</span> <p…
Html – the right way to do this with BEM+ SASS
I am using the BEM method together with SASS and I have a big doubt. I have this HTML <section class="section1"> <p class="section1__tittle"></p> </section> <section class="section2"> <p class="section2__tittle"></p> ... </section> This CSS : .section1{} .section2{} .section1__tittle, .section2__tittle{ // as both…