Tweaking the vertical position of an image

Positioning images/icons alongside text or other elements can be tricky. The following CSS will allow you to slide the image along the vertical axis.

.something img {
    position:relative;
    top:50%;
    transform:translateY(-35%); /* play with this */
}

Responsive font sizes

When designing for mobile, a lot of things have to move and scale. One of those things are fonts and their size must be adjusted to look good for various screen sizes. One way to do this is with a base measurement in % and the em measurement which is relative to the base measurement.

Let’s see some code…

body {
    font-size: 100%; /* This is the base value */
}

.font-regular {
    font-size: 1em;
}

.font-large {
    font-size: 1.5em;
}
.font-extra-large {
    font-size: 2em; 
}

Now when the base size changes all the font sizes are updated accordingly. You can also use this base for things like margins etc…

Responsive horizontal menu

Here is how I do a simple responsive horizontal menu where the elements are equally spaced.

CSS for four items…

.menu-item {
    width: 24%;
    margin: 0 0.5%;
    float left;
}

Adjust the percentage as required.

Circular buttons

Now and again you have to make a round (circular) button. This is how I did it.

https://jsfiddle.net/n2fole00/L2m1us5t/

html

<button type="button" class="btn-round btn-lg">
    <span>29</span>
</button>  

css

.btn-round {
    color: white;
    font-weight:bold;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: red;
    border: none; 
    outline: none; /* remove focus after click event */
}

.btn-round.btn-lg {
    font-size: 24px;
    width: 48px;
    height: 48px;
}

.btn-round.btn-sm {
    font-size: 17px;
    width: 34px;
    height: 34px;
}

.btn-round.btn-xs {
    font-size: 12px;
    width: 24px;
    height: 24px;
}