Posts by hugocsl • 65,517 points
1,996 posts
-
6
votes2
answers301
viewsA: Div with position: Fixed loses total container width
I believe that’s it The size and position of an element are often impacted by its containing block. Percentage values that are Applied to the width, height, padding, margin, and offset properties of…
-
3
votes2
answers1047
viewsA: Problem with CSS media queries
Your @media is very confused, I don’t know if this answer will solve the problem fully, but I hope I help you and understand how you will set up your rules of media querie Notice that this @media…
-
4
votes1
answer173
viewsA: What is the pseudo-class :lang for?
Let’s make some things clear to facilitate understanding. Basically the :lang() is just a selector. It serves nothing but to indicate the element to which the CSS should be applied. For example:…
-
2
votes3
answers397
viewsA: Footer does not remain at the bottom of the page
Since Bootstrap has flex classes, you just have to put the container of the form with flex-direction column, after you put the form with flex-grow:1, and the footer with margin-top:auto.…
-
5
votes1
answer268
viewsQ: How to make filter Blur pick up the whole element. Prevent Blur from ending before the end of the element background
I have a div who is with filter:blur(), but I noticed that the blur means it is inside the element. What I mean is that when you reach the box-model boundary the image of background begins to…
-
5
votes2
answers52
viewsA: Two data cells for one header
To expand a table cell you need to use the attribute colspan. I remember that colspan is to expand the column, and rowspan is to extend the line. If you want the column to extend by two cells, you…
-
4
votes3
answers71
viewsA: Why is the pseudo-class :Hover not working?
Anderson’s answer is the right one, but just to clarify, the way you wrote it #p1:hover #p2 indicates that you are looking for the element #p2 within the element #p1, that is, this CSS indicates…
-
2
votes3
answers113
viewsA: Background CSS/HTML
Dude your background just doesn’t apply properly because you wrote the property background-image wrong. in your code is like this: url ("background.png") Notice that you left a space between and the…
-
2
votes1
answer34
viewsA: Collapse in Boostrap 4 is not opening
Your problem is simple, you forgot to add jQuery on <head> He must come before the popper.js and before the bootstrap.js Here is a Base Template indicated by the official Bootstrap…
-
2
votes1
answer72
viewsA: How to troubleshoot firefox flex display
Friend basically what was missing in your code was to define a reference on the axis X, notice that you declared a top as 0, which would be pebble Y, but did not state anything for the axis X, you…
-
4
votes2
answers2285
viewsA: How to change the style of an "input" field of type "range" using only CSS (and maybe some webkits)?
Guy for the style "catch" first vc have to remove the original style, for that you can use a all:unset and then a -webkit-appearance: none; and then put your styles. To work in Firefox you need the…
-
0
votes1
answer122
viewsA: Disable Collapse bootstrap v4 Standard 5.5
Your answer is in the documentation! To navbars that never collapse, add the class .navbar-expand on the navigation bar. To navbars that always collapse, add no class .navbar-expand.…
-
3
votes1
answer47
viewsA: Place Content Article Horizontal
You can do using flex and a @media to determine that on smaller screens of 850px for example the content will stay inside a box in column, and if it is larger than 850px the box is in row. And in…
-
1
votes1
answer401
viewsA: How to view the x and y position of an element by Chrome Devtools?
I use a Chrome extension that calls Page Rule https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme See that she gives the position X / Y of the element. Below is the…
-
2
votes1
answer477
viewsA: How to hide url
One option is to use jQuery and not return the event on click. Notice I put one fadeOut() for Modal to disappear with a transition, but if you want it to disappear from the screen at once you can…
-
2
votes3
answers140
viewsA: Problems with <Progress> tag stylization in CSS
About the progress bar just you put overflow:hidden it solves. With the overflow the background will respect your border-radius . Something else instead of using padding of 1px to "push" the…
-
3
votes2
answers3520
viewsA: Responsive bootstrap layout
Your code has two problems, the main one is that you are not using the meta tag viewport, without it your page is not responsive in the right way. Add inside your <head> the tag below <meta…
-
2
votes1
answer1628
viewsA: How to open Pop Up automatico?
You can just reverse the logic. Let it start with opacity:1, and when you click the button X to close you use the :target to place opacity:0 .pedido { margin-top: -300px; margin-left: 40%;…
-
2
votes2
answers1123
viewsA: Animated Background in CSS
Follow a direct option on body using only the background, nor need tags html :D All with CSS: html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { background-image:…
-
2
votes2
answers614
viewsA: Move fixed div along with browser scrollbar horizontally
Dude, your CSS is not very good, I don’t think that’s the best way to do this... Anyway it follows an option, it basically replaces the position:fixed, for position:sticky thus the div left stands…
-
3
votes1
answer106
viewsA: What happens if I don’t use the Slim version of jQuery with Bootstrap?
James the point is that the standard jQuery has a number of things that are not used in Bootstrap as Animations by JS, AJAX and other deprecated and ancient methods. Therefore they indicate the…
-
1
votes1
answer111
viewsA: Error BOOTSTRAP SASS _is not a color for `Darken'
Look it is difficult to explain why the mistake without knowing what you did there. But the documentation helps a little to clarify things... You’ve probably changed some Mandatory Key For example,…
-
1
votes1
answer1126
viewsA: I cannot place the image next to the title using tag link
The structure of your Document is wrong, the recommended is that the tags <link>, <title> and <meta> must be inside the <head> Ex: <!DOCTYPE html> <html…
-
1
votes1
answer136
viewsA: How to make a div be positioned as a block in the middle of another div?
Guy basically missed a float:left in class .lateraldireita .lateraldireita { position: relative; float: left; } Code OBS: Like you haven’t done the @media to treat the responsiveness here the layout…
-
1
votes1
answer631
viewsA: bootstrap line break does not occur
Your Navbar is quite different from what the documentation says... Also, your problem is actually whether the pq you are using the class navbar-expand-sm in Navbar, only that since you have many…
-
0
votes1
answer205
viewsA: Github doesn’t climb my site properly with Bootstrap 4
Your path is wrong to access CSS Note that in your HTML the reference is like this <!-- Bootstrap CSS --> <link rel="stylesheet" href="node_modules/bootstrap/compiler/bootstrap.css">…
-
1
votes1
answer104
viewsA: Printing does not allow font change by CSS
You can force print style using a media querie Print, like @media print directly on <p> .conteudotopo > p. Here you can read more if you are interested…
-
1
votes2
answers40
viewsA: Logo is not positioned correctly on the mobile
Your problem is that you did not follow the documentation of Bootstrap’s Navbar, now I believe that you will only manage it in the right way... Behold My tip is to remove the float when the screen…
-
4
votes2
answers688
viewsA: Creation of buttons with bootstrap
Just use the original Bootstrap flex classes, you don’t even need extra CSS for that. https://getbootstrap.com/docs/4.0/utilities/flex/ NOTE: use the Bootstrap tb grid classes to avoid problems…
-
1
votes2
answers91
viewsA: Responsive Filter
Guy your code was a little confused, too much unnecessary CSS etc. I made a template using flex and was very responsive. Basically I divided each group of label with the title and the select in…
-
0
votes1
answer43
viewsA: insert Style into PDF
Unless that API of PDF remove the tag <link> you can quietly use a style.css within the body See here that the tag link is a flow content and is permitted within the body…
-
3
votes2
answers53
viewsA: Positioning of the third div
Follows a model with float as you wanted, the problem is that with float the height of the box on the left is not equal to the height of the boxes on the right, if you want to adjust this you have…
-
6
votes4
answers9155
viewsA: Change the background of input filled in by Chrome autocomplete
Recently Chrome changed the color of Autofill of inputs for a shade of Light Blue, but apparently the old techniques continue to work... I will post only one alternative that I thought was cool, and…
-
5
votes2
answers162
viewsA: Centralize Divs responsibly
Your HTML has some problems, first you are putting the same ID in various elements, this is not recommending, IDs should be unique. After you are using the tag <center> this tag is obsolete,…
-
0
votes1
answer41
viewsA: Elements are not well responsive and functional in bootstrap
Guy basically what happens is you put your container with class w-50 and did not use a Row to separate their content groups. What I did was remove class w-50 from container and separate the title…
-
3
votes1
answer101
viewsA: Why is the custom cursor on my website not working?
When using a cursor image it is necessary that you declare a fallback if the image is not loaded. Normally the auto, but you can use pointer or qq other default value. Here you can see more in the…
-
3
votes2
answers186
viewsA: How to place zigzag edge on an image using css?
Face this is a bit laborious, because you kind of need some "magic numbers" (numbers on fixed px), because only so you can precisely adjust this picture. What I’m going to do is a gradient of that…
-
1
votes2
answers232
viewsA: Add a URL link to a CSS class via JS
You can’t really understand what you want. But what I believe is you want to exchange one href one-link... So you can take the <a> you want for the ID or Classe and exchange the value of href…
-
1
votes1
answer537
viewsA: Resize input size inside table
You can select ins inputs by CSS and place one max-width. I don’t know if that’s what you wanted... But first notice that use width="" direct tag is not recommended. W3C validator itself is error if…
-
0
votes1
answer31
viewsA: How to make an element *Child* unique (Where the child of the child has the same class)
Cara has as yes, the problem is that some classes are inherited by default, such as text type properties color and font-family. You’ll need to use the dial :not(), to prevent the element with the…
-
1
votes1
answer315
viewsA: Position: Sticky CSS or JS
I made a model, I don’t know if it’ll suit you... What I did was turn the date box into a pseudo-element after, and I created a pseudo-element before to use as a date mask below. Basically what I…
-
1
votes1
answer99
viewsA: How to increase modal popup width in mobile
Look at the Bootstrap documentation itself indicates how to make the table responsive. I don’t know if it suits you, but that’s what the official documentation indicates, frameworks are like this...…
-
1
votes1
answer28
viewsA: ITCSS - Where are the animation files?
Felipe, if we go to the theoretical side of the thing I believe that the correct thing is to put the animations in Tools (Tools), I will explain pq. Once you can turn an animation @keyframes in a…
-
0
votes2
answers58
viewsA: Dynamic class in Stylus
I don’t know if I got it right, but I think that’s what you need. If you have a variável containing a cor, you can include this color in the property, as below. If you have this Stylus vermelha =…
-
3
votes1
answer2422
viewsA: How to move a button in CSS?
There are several ways to do this, the easiest I believe is with position:absolute. First you put the father and all the "father" elements with 100% height and width to occupy the whole screen, then…
-
3
votes1
answer220
viewsA: Help with centering grid items
I don’t know if I got it right, but since you’re using Grid I suggest you use one display: grid; and align-content: center; in the father div #grid-container and also place a height on the form and…
-
3
votes2
answers479
viewsA: A div cover the entire screen in CSS
Here’s an example I used display:flex in the father for the image to be aligned in the center with margin:auto How the element has position:fixed it is relative to window, and you need to align it…
-
6
votes3
answers1089
viewsA: Function - show password!
Have an option to do this "check" only with CSS used to pseudo-class :placeholder-shown. So you won’t even need to enter a class .active on the label, because the check is on input + label for css…
-
0
votes2
answers48
viewsA: How do you make a left DIV the same height as a large right DIV?
Your code has several "problems" because your Grid is far from what the official documentation says.... First you have to put your content within a single container, after the son gave container…
-
0
votes1
answer353
viewsA: Page alignment css materialize
Your problem is that you put a div with class container with the form etc, and within that container, you put another div with class container with the table... you put two container, one inside the…