Posts by hugocsl • 65,517 points
1,996 posts
-
1
votes1
answer185
viewsA: How to make text appear and disappear with Jquery
Dude just use the method toggle() he’ll be right there show/hide every time you click on button $(document).ready(function() { $('BUTTON').click(function(){ $('h1').toggle(); }) }); <!DOCTYPE…
-
4
votes1
answer40
viewsA: How to make an automatic grid for exact measurements using SCSS?
This formula will make the progression of the columns in PX until 1272px $grid__cols: 12; @for $i from 1 through $grid__cols { .col-#{$i} { flex-basis: (1272 / ($grid__cols / $i) ) * 1px; } } OUTPUT…
-
3
votes2
answers280
viewsA: How to decrease touchpad scroll sensitivity in Vscode?
Good I’m not sure it will work because I don’t have the environment to test precisely. But here are some configs that can help you First in option Editor: Mouse Wheel Scroll Sensitivity place a…
visual-studio-codeanswered hugocsl 65,517 -
0
votes1
answer102
viewsA: split article into two columns
Your friend is a case that the Float makes much more sense than translate, actually the path you are trying to follow with CSS will only give you trouble after. I made an option with your own code,…
-
1
votes3
answers1846
viewsA: Auto indentation problem when saving to Vscode
Guy talked in the comments this is not the standard behavior of VS Code, which leads us to believe strongly that it was Extensão, probably one that has code formatting options, which you installed…
-
4
votes1
answer65
viewsA: Is it possible to limit the number of items in a dynamic list using CSS only?
To do with nth-child yes, taking the sixth son forward and giving dispay: none using @media See the example below and run in full screen to test. In this example no matter how many LI then have in…
-
2
votes2
answers40
viewsA: How to use the same background for an "X" element with css and html?
Face to complicate... creates a svg with the shapes, puts the svg within a div with the image of background, then into that div use elements with position absolute to write and align text. You will…
-
2
votes1
answer83
views -
1
votes1
answer63
viewsA: Center <div>
Your div is the direct daughter of body, and is with position: absolute, then when you put left: 50% in that div means that the div will align from 50% do body, and not centered on body as shown…
-
1
votes1
answer65
viewsA: Problems aligning div on the right side
If the flex container this one with flex-direction: row, which is the standard, you have to use margin to align child elements in andixo X, then a simple margin-left: auto in div.btns solves your…
-
5
votes1
answer48
viewsA: How to center a fixed menu (div)?
Fixed shall relate to viewport, then you have to declare a left and right for the element #menubarra { position: fixed; height: 50px; width: 80%; background-color: #cccccc; border-radius: 5px;…
-
1
votes1
answer27
viewsA: Like a Block display when scrolling the page
Here’s an option I made with CSS only In it I put a container with 100px height and moved that container with position:fixed and displaced 50px out of the screen, up with Transform:translateY(-50%).…
-
0
votes1
answer58
viewsA: CSS Grid Tables creating new lines when they shouldn’t
Guy the display:grid then you have to be in .row, and not in the .container! The "grid container" always has to be the direct FATHER of the children you want to distribute, and not the…
-
2
votes2
answers67
viewsA: Change color of partition
Just change the color of the border-color: #sua-cor; See the example below. You can still vary the border-style if you want a different room... hr { border-color: #ff0000; } <hr> <br>…
-
2
votes1
answer24
viewsA: Why does the fixed element lose its position when the Transform property is used?
Dude although the answer solves the problem, I can’t tell you exactly why when you put the transform the element fixed misses the reference in viewport :/ To solve the problem first put a margem: 0…
-
1
votes1
answer2291
viewsA: How to open an HTML page in the browser with Vscode
You can install some extension as for example Live HTML Previewer Extension link: https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer With it installed you can configure a…
-
1
votes2
answers76
viewsA: Gradient Animation CSS
Your problem is that you only used the shorthand of background to the gradient, and should be background-image Notice where it was background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5,…
-
1
votes1
answer32
viewsA: I can’t get the "column" Divs to stand next to each other
Your CSS is right your HTML is what’s wrong, see that you separated each column individually within a Row, but in fact you had to have 3 columns inside the row there without you will have 3 columns…
-
0
votes1
answer18
viewsA: How to adjust level of a bar with double lists
You can use flex in Nav and use the property justify-content: space-between; to place a UL on one side and the other UL of the other It won’t be good here, but test in Whole Page you will see how it…
-
4
votes1
answer86
viewsA: Movement Chain of Ants
There’s a way to do it, but to do it with border-radius will give you more trouble, because you’ll have to have one path exclusive within the SVG or use the property rx of rect for, but if you want…
-
0
votes1
answer205
viewsA: How do I place a text on the same line as a bootstrap Collapse button?
The <p> is an element block, ie it occupies the entire line (100%) of the width of the screen, so the button is not on the side. One way to fix this is for example to change the <p> by a…
-
1
votes1
answer45
viewsA: How to fill a DIV with another DIV properly?
Puts the container mother with display: flex and flex-direction: column, then the div you want to fill the total of the mother container you put flex: 1; #parents{ border: 2px solid #000; width:…
-
1
votes1
answer95
viewsA: Position text before and after a hyphen aligned to the center
In class .lead-contact you put display flex, and in the spans that are inside put flex: 1 and aligns with text-align .container h1 { text-align: center; font-size: 26pt; } .leads { display: flex;…
-
1
votes1
answer196
viewsA: Move elements from right to left, Nav
First, in this class the "." content ul li { should be .content ul li { and still has a div closure in the middle of the code </div>, it seemed unnecessary... After you are putting container…
-
2
votes1
answer32
viewsA: Use scroll event in a specific element
I don’t know if I got it right, but you can spot the event scroll of a single element. In the example I have a div with overflow:auto, in the scroll performs a function... let elemento =…
-
3
votes1
answer112
viewsA: Move sidebar to the right
Guy looks like you copied this code, because it has a lot of css there unnecessary, and basically it’s put a margin-left: auto and change where it is left for right Click to display across page and…
-
2
votes2
answers460
viewsA: Position of arrow in select
You don’t need to make a custom arrow, you can select it in a conteinar customized in case I used a div, the same way you customized the select See the images That way you give the padding in the…
-
0
votes2
answers81
viewsA: Grow DIV according to content
You have to put on the inside one width, but that this width be "flexible", one of the options is to put width: max-content; I added an edge to the div just so you see that it only occupies the…
-
0
votes1
answer619
viewsA: Rename in VS Code
You have to use the Search, ai vc search the term and at the same time choose another term to do the Replace, then just click on the. Replace Everything and of the one Save All Tool to seek and…
visual-studio-codeanswered hugocsl 65,517 -
1
votes1
answer36
viewsA: Text on button makes line break automatically, taking space for the rest text
The text is breaking inside the BTN pq the Pai container has display: flex; to correct this puts a min-width in BTN and slightly decreases the padding Another option is to put white-space: nowrap;…
-
1
votes2
answers217
viewsA: How do I place an eye icon that can reveal or hide password inside the input?
Here is a simple option, using a img within the btn, plain as that... I gave a all: unset to clear all standard button styles user-agent and put the image inside, since inside a <button> is…
-
2
votes1
answer33
viewsA: Div mother occupy all height of absolute content
Guy the first step is to put the body and the html with height 100%, then you take your mother div <div class="pagina-sobre-nos sessao-quatro"> and put in it height 100% and ready Look at the…
-
2
votes3
answers468
viewsA: Menu button with "toggle" event
There is a way, but it is not indicated because it is not semantic to make a menu... but you can use the tag <details> Law more here:…
-
3
votes1
answer53
viewsA: elements one over the other
Guy basically just put the button and the text below it inside a container, tb with flex, and set as Column and align in the center. The flex has a property that you determine whether the elements…
-
0
votes1
answer245
views -
0
votes1
answer133
viewsA: Remove material menu edge
It’s actually not a border, is a box-shadow, maybe that’s why you haven’t found the edge to remove... In class .mat-expansion-panel:not([class*=mat-elevation-z]) you put box-shadow: none…
-
1
votes1
answer55
views -
1
votes2
answers110
viewsA: Change page background as user chooses color
Your problem is that your input is type submit, and should be type button <input type="submit" value="TROCAR" onclick="trocarcor()"> Should be <input type="button" value="TROCAR"…
-
1
votes1
answer232
viewsA: Use Sass bootstrap semantically and selectively
Sorry for the "move" answer, but in this Bootstrap file you can delete the @imports that you don’t want. After you’ve erased the @imports that you don’t want you need to recompile the .SCSS to…
-
3
votes2
answers34
viewsA: How do you drill a hole in the parent elements until you see the body?
This solution is not completely perfect, but for me it is acceptable... so I will post as an answer... I put the same background for the body and for the screwHole, put some background configs as in…
-
1
votes1
answer28
viewsA: "Continue" button to display div to enter password in the form
Just you already start the div with display:none in the style, note that in the div#password I put a style="display: none" <html> <!-- CSS --> <style> input{ display: block;…
-
3
votes1
answer48
viewsA: How to make a parent <ul> element have the width of your children’s total <li>?
Just use the properties width:max-content; max-width: 100%; in UL So the box box of UL is always the size of the content, and when the content is greater than 100% of the width of the container for…
-
1
votes1
answer436
viewsA: Position cards on top of image in the background?
Face the structure you’ve set up is quite wrong... You need that order: container-fluid > row > col-12 > card-deck > card This is the official BS documentation on how to use the cards…
-
1
votes1
answer21
viewsA: Remove the scroll bar or disable
Just in the event you open and close the remove menu the overflow of body Notice that in the script below I added the const elt = document.body; and then inside the if/else I add or remove the…
-
2
votes1
answer627
viewsA: Responsive menu with CSS, HTML and JS
Basically missing this code in your CSS @media screen and (max-width: 768px) { .nav-links.nav-active li { opacity: 1; } } Notice in it when the .nav-links is with the active class I change the…
-
5
votes1
answer40
viewsA: How to scroll with 3 Divs
In this particular case do not use display: flex; use display: inline-block his son and grandson white-space: nowrap; to prevent grandchildren from breaking online inside the child. It seems a bit…
-
1
votes1
answer42
viewsA: How to make a slider?
In class items puts display:flex and overflow-x: auto, in this example I limited the width in 350px just so you can see the scroll turn up. I also left some comments in the code below to help .itens…
-
1
votes2
answers31
viewsA: "Hide" div by default
Here you are hiding the BTN inside the function $('#seus_videos').hide(); But to hide them before, just you put display:none on the selections you’re wearing #seus_videos With CSS would be (indicate…
-
1
votes1
answer34
viewsA: Why is my bootstrap Carousel not working?
Your<div class="carousel-iten active"> is locked in the wrong place, you put all the slides inside it, this is wrong, other detail, by good practice it is convenient to put all the files .JS…
bootstrap-4answered hugocsl 65,517 -
1
votes2
answers187
viewsA: make a Ubmit button of this type
Don’t use a div to make one botton, especially if you don’t give semantics to her using role or aria-label Then a div won’t have type:submit or type:button you will have to use JS, then it will not…