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 More

Media 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 More

Different 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 More

Flexbox 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 More

CSS 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 More

Completely 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 More

CSS 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 More

Multiline 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 More

Fixed 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 More

Removing 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