This is due to varying column height. You need a “clearfix” reset every 3 columns to force even wrapping. One way is to use the approach recommended by Bootstrap, or in this specific case you can use a simple CSS clearfix like this.. @media (min-width:992px) { .auto-clear .col-md-4:nth-child(3n+1){clear:left;} } Demo: http://codeply.com/go/mONLiFj30T For other “clearfix” scenarios … Read more
Without place-items: center; your grid items will get stretched to cover all the area (the default behavior in most of the cases) that’s why the background will the cover a big area: With place-items: center; your grid item will fit their content and they will be placed in the center; thus the background will cover … Read more
If you think in 3d, you can use the perspective and rotateX() properties to alter only one or two angles of an element. This will allow you to style pseudo elements of the container to give them the desired shape and cut out the top right and bottom left corners. You can also give the … Read more
Unfortunately, you can’t change the alignment of SELECT items in IE, although it surprises me that even IE 8 keeps this bad habit.
When using auto-fill or auto-fit, there must be a definite min-size or max-size. By “definite”, the spec means: A size that can be determined without measuring content. https://www.w3.org/TR/css-sizing-3/#definite When you set both minmax arguments to content-based size, like this: grid-template-columns: repeat(auto-fill, minmax(auto, 1fr)); … that’s a violation of the spec because there is no definite … Read more
You are using the image as a background. Why not set it as the src property of the button ? <input src=”https://stackoverflow.com/questions/4108983/images/submit-bkg.png” id=”searchsubmit” name=”searchsubmit” type=”image” value=”” tabindex=”2″/> When you set the type as image the input expects an src attribute as well.. Reference: http://www.w3.org/TR/html401/interact/forms.html#adef-src and http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1
I’m afraid it’s impossible. There was once text-overflow: ellipsis-word, which would do just this, but it was not implemented in browsers and it was removed from CSS3 drafts.
Specificity Your issue is most likely regarding specificity. Chris Coyier has a great article on CSS specificity. I would also suggest you check out this handy specificity calculator. Using that calculator, we can see that .table-striped > tbody > tr:nth-child(odd) > td has a specificity of 23. As such, to override that, any new rule … Read more
You can simply use the cm unit in CSS: #mydiv { width: 25cm; } Note that, as others pointed out, the result still depends on the correct reading of the monitor size by the operating system. See the spec for more information.
You can use gradients to create a zig-zag patterned background, use the ::after pseud-element to apply it like a border. .header{ color: white; background-color: #2B3A48; text-align: center; } .header::after { content: ” “; display: block; position: relative; top: 0px; left: 0px; width: 100%; height: 36px; background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) … Read more