Posts by hugocsl • 65,517 points
1,996 posts
-
1
votes1
answer3085
viewsA: How to create a horizontal overflow?
I don’t know exactly the HTML structure you have there Containe and of divs. But here is a simple example made with flexbox that can help you. .box { min-width: 200px; height: 100px;…
-
11
votes2
answers680
viewsQ: In HTML what is an Undetermined Checkbox and how to use this status along with CSS?
As far as I knew a input of the kind Checkbox could have three states, checked, unchecked and disabled. But it seems he has a fourth state which is the undetermined. See in the image a comparison of…
-
1
votes1
answer58
viewsA: Image does not float with bootstrap 4
Its HTML structure was somewhat disorganized, according to the Bootstrap Grid models. I made only small adjustments and now it’s in line with what I believe is your idea. No need to use any CSS,…
-
7
votes4
answers9348
viewsA: Put an IF in CSS
You can do this only with CSS and the property :placeholder-shown The idea is this, if the field has a placeholder how value you can make the :hover that nothing happens, but if he has something…
-
2
votes3
answers1704
viewsA: Outline image with CSS text
I will post a more current answer, but it is not completely crossbrowser, does not work in IE or Edge, and only works in the latest version of Firefox (version 62+) The idea here is to use the…
-
1
votes1
answer691
viewsA: How to change the position of Owl-Nav in Owl.Carousel
Cara vc can create a small CSS, two lines only, to fix this. First vc of flex display on container, and then line up the div in a reverse column with flex-direction: column-reverse !important; So…
-
1
votes1
answer221
viewsA: Items navigation type <select> mobile
I don’t have a test environment here to see how this option works, but sometimes it can work there with you. You can force the order of "tabs" between the fields using the tabindex guy tabindex="1"…
-
2
votes1
answer735
viewsA: Position Fixed mixing margin
There are different ways for you to have that same result. But I preferred to put one padding-top in the body slightly larger than the height of the green bar (Bootstrap does that too) and one put a…
-
4
votes1
answer174
viewsQ: How to Simulate Zoom Tweezers (Pinch zoom) in Chrome Dev Tools?
I am working on an interface that will be mobile. Is there any way to simulate the Zoom Tweezers (Pinch zoom) in Chrome Dev Tools? At least from version 59 or later? NOTE: For those who were in…
-
0
votes1
answer122
viewsA: Difficulties with responsiveness for complex layout
I took a look at their code and they had a lot of structure details in HTML and CSS too, lots of redundant, unnecessary classes. Some of them including as the padding you can use the native…
-
3
votes1
answer434
viewsQ: How to do "Semantic Quotes" with the <q> tag, but it is with a different font-family
The question is very simple and objective, I want to have a font style for the paragraph and another font style for the quotes, but when I put the content between the tag <q> what’s inside…
-
1
votes1
answer792
viewsA: Banner animated with HTML5
I tested your HTML in the W3C HTML validation tool and no errors were found (other than images without the attribute alt). You can even test here and show your client:…
-
3
votes2
answers56
viewsA: Problems with Bootstrap grid
You can use object-fit yes quietly. Just put the width and height image with 100%, you can still use the object-position to control the alignment of what is rendered on img. Just keep in mind that…
-
0
votes1
answer482
viewsA: Place two tables next to a div
Here’s an example that can help you. I’ve put a style where the calendar tag is just to help you and see how it can look. In addition to a tag <div> which was open without closing, you also…
-
2
votes2
answers278
viewsA: Add attribute via CSS if the following element contains x element inside
Dude I don’t know exactly what problem you have to solve there, but I think your thinking about class ordering and property is a little misguided... What would you put it for margin-bottom in the…
-
3
votes1
answer119
viewsA: How to rotate a 90º IMG occupying 100% of the element?
Option 1 You can use object-fit: contain in the image. (this option does not work in IE as you can see here: https://caniuse.com/#feat=Object-fit) See how it looks: img { display: inline-block;…
-
4
votes1
answer570
viewsA: How to prevent an Input Required from starting with the CSS style :invalid
First of all this is not a definitive answer, it does not work on Microsoft browsers... for a change... Now let’s get down to business. What happens here is that the input must have a value of…
-
7
votes1
answer570
viewsQ: How to prevent an Input Required from starting with the CSS style :invalid
When I have a input required that has some CSS style when it is :invalid, even before the user interacts with the input it is already stylized as invalid. How can I avoid this? Take the example:…
-
4
votes2
answers8380
viewsA: How do I limit the amount of characters in a textarea and input using CSS
If you want to limit the number of characters inside the input you can use maxlength="100" and to fit inside it visually exactly 100 characters you can put width: 100ch In this example you can see,…
-
1
votes1
answer60
viewsA: Align div inside a Box
Man if you’re using display:flex in the .pai you have to use align-self: flex-end; in the .filho So he lines up at the base of the container father regardless of his size. No need to set position…
-
0
votes1
answer872
viewsA: How to apply Hover to all *siblings or *children?
Italo made a simple example that may help you. But I already say that when you make a :hover in the child, you are automatically doing the :hover in the father. In short you can’t change the father…
-
5
votes1
answer599
views -
7
votes1
answer132
viewsQ: How to prevent pseudo-element (:before or ::after) within a <a> tag from being clickable?
Is there any way to prevent pseudo-element ::after or ::before one-link <a> become part of the link itself? My idea was to use one ::after in a link tag <a>, that ::after would be used…
-
1
votes2
answers158
viewsA: Shadow outside the div
Most likely this is an element with two backgrounds, a bg with the image and another bg with the linear-gradiente. See this example and look how was built the background of div body { margin: 0; }…
-
1
votes1
answer194
viewsA: String waves with CSS
Let’s take steps, as you said SVG is an alternative I will give you a step by step how to understand and use. Logically you will have to read some documentation. Documentation by Mozilla about…
-
3
votes4
answers72
viewsA: Remove Class after Click
Your problem most likely should be the order in which you are placing the scripts within your document. Also Booststrap uses the newer version of jQuery and not the older version you are using...…
-
17
votes4
answers1235
viewsQ: Does the order of CSS styles influence the render tree?
During the Paint from the document by the browser the order of the properties of the CSS classes may interfere in how we perceive the page’s "assembly"? Especially in slower connections, we…
-
0
votes1
answer191
viewsA: How to align texts within an html table
To get good even you have to separate each of these values in a TD, so you have a better control of the alignment of the items within the cells and the width of cells. Notice I used the class…
-
0
votes1
answer54
viewsA: Do not "terminate" the effect when you have something in the input
Just create a style when the input for :valid to leave the text on the top See how it looks in the template below with your code .effect{ position: relative; background-color: transparent; } .effect…
-
2
votes1
answer2736
viewsA: How to customize the audio html element controls?
This is a model that can help you. /* Esse modelo também funciona para vídeo basta trocar a tag <audio> por <video>: <video width="1280" height="720" > <source src="movie.mp4"…
-
0
votes1
answer76
viewsQ: In CSS why does the :Empty pseudo-classes work and the :not(:Empty) do not work in the input?
I’m trying to make a form template where I think better of the user experience giving visual feedback when the field is filled. Then I came across a "problem" that I can’t explain... Because in the…
-
1
votes2
answers3182
viewsA: How to decrease Bootstrap table height?
According to the documentation you must use the class table-sm on your table. https://getbootstrap.com/docs/4.0/contenttables/#small-table Add .table-sm to make Tables more Compact by Cutting Cell…
-
1
votes3
answers163
viewsA: How to draw a ribbon(gift loop or label) on a div?
Vc can use pseudo-elements ::before and ::after for that reason. In the ::before you use a linear-gradiente in 45deg, and in the ::after you put the content:"novo" See how it looks in the example:…
-
1
votes1
answer46
viewsA: Automatic br in mobile version
Dude you need to make a rule @media to control how everything behaves on mobile and desktop. The model I made is pretty basic, and how you used table and not a grid with Divs for example the…
-
7
votes2
answers191
viewsA: How to force justified size?
As a curiosity, another option, besides the one quoted by friend @wiliamvj would be you use a source mono spaced as the monospace, consolas or Inconsolata That kind of type-face has all characters…
-
1
votes2
answers947
viewsA: How do I give spaces between the Tag Input
See the example with margin-right in all items except for the last pq there is no other element on the right. table { border: 1px solid; } [type="radio"]:not(:last-of-type) { margin-right: 20px; }…
-
0
votes1
answer1354
viewsA: Swap text using ::before - CSS
Gabriel is going wrong because pseudo-element ::after is inheriting the font-size from the father who is 0, so you have to put a font-size pro ::after or else it will be 0 like the father his. See…
-
2
votes3
answers418
views -
1
votes1
answer451
viewsA: Create a div with links to social networks
Face you can replace the display:inline-block for flex, and divide the divs in equal sizes using the width with calc thus width: calc(100% / 3) See how it looks in the model below. .footer-img {…
-
6
votes3
answers418
viewsQ: Is it possible to create a letter seal element with CSS?
What is the best way or way to build an element similar to a CSS-only Letter Seal? (at the moment I didn’t want to have to use SVG) I’m trying to build this shape with HTML/CSS and the option I have…
-
1
votes2
answers1166
viewsA: How to make an HTML form responsive
Basically you have to change the col- of btns of col-md-4 for col-xs-4 because using XS vc ensures that the columns will continue to be divided correctly even into small screens, without putting a…
-
11
votes3
answers7823
viewsA: What is the semantic difference between Section and article?
I will make my considerations about <section> and <article> based on some sources where I will take part of the content. SECTION The HTML element <section> represents a generic…
-
0
votes4
answers389
viewsA: media querie does not work
It follows a model I made based on your code. Notice that Bootstrap 4 is mobile first then he uses min-width, which means that only when the screen had at least 1001px wide will it put the image in…
-
0
votes2
answers289
views -
3
votes1
answer42
viewsA: Sass does not compile special character
I have an answer that can help you. It does not resolve the build bug, but solves the question of the superscript number in content. Repair the content:"" of the element ::after can receive…
-
3
votes1
answer145
viewsQ: Is <label> semantic or allowed to use which elements inside?
Studying I saw some examples of code where the input is placed inside the label, that brought me a doubt, it would be semantic to use what elements within a label? <label…
-
1
votes2
answers127
viewsA: How do I remove the <input type="reset"> border without removing my css border?
Just in the first line of your CSS you put it like this [type="reset"] { all: unset; } To the IE You can do it that way since he doesn’t accept the unset (source) [type="reset"] { border: none;…
-
3
votes2
answers247
viewsA: Infinite scroll on one page with static data
As you said the site was static it is possible to do only with CSS with a few lines inclusive. The most important thing here is to "concatenate" the HTML right. In this model you don’t need jQuery…
-
0
votes1
answer170
viewsA: HTML/CSS - Menus with sub-menus overlap
You need to put a z-index in the sub menu that way .submenu-1{ background:#999; z-index: 1;} See working in the example below ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none;…
-
4
votes1
answer5356
viewsQ: How to remove blank lines in VS Code?
I recently copied a file that was on a server and it came all like this, with a blank line between each line of code. I wonder if there’s a shortcut in the Visual Studio Code, or command to remove…