css
Blurry Background Images in CSS
There are a number of reasons why background image can look blurry in CSS, but recently I came across this issue that I haven’t noticed before — in part, because usually text doesn’t seem to be present, and so blurriness is a little less noticable. Both the top and bottom screenshots in the image below […]
Read MoreMedia Query for Background Images on Higher Pixel Density Displays
.banner{ background-image: url(‘image.jpg’); background-size: auto 100%; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .banner{ background-image: url(‘image@2x.jpg’); } }
Read MoreDifferent Image Files Based on Browser Width
.ipad,.mobile{display:none;} @media(max-width: 768px){ .desktop,.mobile{ display:none; } .ipad{ display:block; } } @media(max-width: 500px){ .desktop,.ipad{ display:none; } .mobile{ display:block; } } <img src=”image-file-desktop” class=”desktop”> <img src=”image-file-ipad” class=”ipad”> <img src=”image-file-mobile” class=”mobile”>
Read MoreFlexbox Spacing on Last Line of Items
I had tiles spaced nicely on my page for all of my blog posts. All was fantastic, except for the last row, which had a large space in between the blog posts. So my layout had three tiles across for each row, but by the end of the page, I had run out of blog […]
Read MoreCSS Table Fixed Left Column
I wanted a nice table where the left column stays visible at all times. I kept trying to use a position of “fixed”, which is of course incorrect, since that will keep it fixed on the page. What I was actually wanted was “static”: .smart-table{ overflow: auto; td{ width: 150px; min-width: 150px; } .first-column{ position: sticky; left: 0; }
Read MoreCompletely Fill a Div With an Image
I used to just use a div and set the background image to what I wanted, and then set the background-image properties to cover. This has never actually seemed like a good, semantic way of doing it though, and lazy-loading those images takes a bit more work, and you miss out on some alt tag […]
Read MoreCSS Cursor Types
I can never quite remember the common cursor types. For some reason, I always think the arrow cursor style, which is what you normally have when browsing a page is set as an ‘arrow’ (which isn’t part of the spec), or as a ‘pointer’, because, well, I guess that seems closer to an arrow, which […]
Read MoreMultiline Ellipsis CSS
Use this, seems to work pretty well. Note, that you don’t want to add any padding on the target element, otherwise it will show text beyond the overflow: .blog-tile-excerpt{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
Read MoreFixed Position Div Isn’t Staying Fixed When Scrolling on Android
My nice fixed position toolbar wasn’t sticking as it should as I scrolled through on my mobile browser window. It would appear sticky at times, but as I scrolled, it would slide up or down. The solution is to add “minimum-scale=1” to the meta viewport tag, which for me, now looks like this: <meta name=”viewport” […]
Read MoreRemoving the Horizontal Margins on a Google Chart Graph
I seem to be able to successfully modify quite a bit with google charts, but I couldn’t find a good way to remove the horizontal padding to the left and right of a google graph. From what I can find, there really isn’t a good way to do it. I thought I was close with […]
Read More-
Adventure
-
The Built Environment
-
Locations
-
Web Dev