Free Error Page Creator

I found a great, free error page creator from Status Page.

It’s an easy to use tool that allows you to create error pages using one of their templates.

Advertisements

Responsive Helpers in Bootstrap 4

I was used to the Boostrap 3 responsive utilities for hiding and showing elements based on the viewport width. However, the syntax completely changed. I found out how the new syntax works through this article on the Medium.

This is the mapping for those used to the Bootstrap 3 syntax.

* `hidden-xs-down` = `d-none d-sm-block`
* `hidden-sm-down` = `d-none d-md-block`
* `hidden-md-down` = `d-none d-lg-block`
* `hidden-lg-down` = `d-none d-xl-block`
* `hidden-xl-down` = `d-none` (always hidden)
* `hidden-xs-up` = `d-none` (always hidden)
* `hidden-sm-up` = `d-sm-none`
* `hidden-md-up` = `d-md-none`
* `hidden-lg-up` = `d-lg-none`
* `hidden-xl-up` = `d-xl-none`
* `hidden-xs` (only) = `d-none d-sm-block` (same as `hidden-xs-down`)
* `hidden-sm` (only) = `d-block d-sm-none d-md-block`
* `hidden-md` (only) = `d-block d-md-none d-lg-block`
* `hidden-lg` (only) = `d-block d-lg-none d-xl-block`
* `hidden-xl` (only) = `d-block d-xl-none`
* `visible-xs` (only) = `d-block d-sm-none`
* `visible-sm` (only) = `d-none d-sm-block d-md-none`
* `visible-md` (only) = `d-none d-md-block d-lg-none`
* `visible-lg` (only) = `d-none d-lg-block d-xl-none`
* `visible-xl` (only) = `d-none d-xl-block`

For more details on how the new syntax works and what you can do with it, check out the Medium article.

Facebook Responsive Embed

This isn’t a Rails post, it’s not even a development post.

I wanted to embed a Facebook post, but I was having trouble making it responsive.  I could have made it responsive using CSS, but I didn’t really want to do that.

I looked at this Stack Overflow question, but I couldn’t get the solution work where you change the embed code to be width:100% and width:auto.  That worked for the width, but the height wasn’t adjusting for me.

What I figured out was if I click to embed and then I go to the advanced settings, I could get it to work by removing the ‘500’ for width (in the settings), and then getting the Javascript code (could not get the iFrame to work).

A Free and Easy Way to Create Responsive Emails

I’ve found a quick and easy way to create responsive emails using Bee Free.  Bee Free offers some templates (or you can build from scratch) that you can use along with their drag and drop editor to create responsive emails.

In their tool you can:

  • use a drag and drop interface
  • export everything to HTML (free)
  • preview in desktop and mobile views
  • send an email to yourself to preview it

I’d highly recommend it if you want to add style to your emails without buying templates.

Make YouTube Videos Responsive

It’s kind of hard for me to believe given Google’s emphasis on making sites responsive, that they haven’t supplied people with an easier way of embedding YouTube videos on responsive sites. Fail.

Nonetheless, there’s workarounds to make the videos responsive by editing your CSS.

OS Training has a simple solution.  They create a wrapper in CSS that makes the embedded video responsive.  All you need to to is add the div class and copy and paste the CSS.

CSS Only Image Overlay

While this isn’t a Rails solution, it was one that was so helpful to me that I wanted to post about it.  I needed a tinted/filtered image overlay with text.  After Binging the internet, I found the solution courtesy of Koren Leslie Cohen.

You can read her post here to see a demo, but you wrap your image, like this:

  <div id=“outer-box”>
    <img src=“cartagena.jpg”>
    <div id=“inner-box”>
      <p>This is the overlay!</p>
    </div>
  </div>
and then add this CSS,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#outer-box {
  width: 300px;
  height: 194px;
  display: block;
  position: relative;
}
#outer-box img {
  width: 300px;
  height: auto;
}
#outer-box #inner-box {
  background: #FD8698;
  height: 100%;
  width: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  position: absolute;
  padding: 0;
  transition: opacity .5s;
}
#outer-box #inner-box p {
  color: #fff;
  lineheight: 150px;
  fontfamily: ‘arial’;
  textalign: center;
}
#outer-box:hover #inner-box {
  opacity: .9;
  transition: opacity .5s;
}

This will show the overlay when the image is hovered over.  For me, I wanted to show the overlay without the hover, so I changed line 33 to be:

#outer-box #inner-box {