Styling search forms that have the input and button displaying inline can be a real pain. Sure, we can use the float property, but we would need to give each element a width. It's workable, but such a hassle to make it responsive. So here is a flex box solution that ensure each element of the form float next to each other and grows/shrinks as required.
Here's a light weight code snippet that creates a modal popup that slides amd anchors from the browsers bottom edge.
On the DJ Vadim website I needed to create a gallery of album covers that displayed each cover in a perfect square, but was also responsive and would resize dynamically on various screen sizes. I could have declared a whole variety of CSS values for each media breakpoint, but I wanted a much more elegant solution. I settled on the following:
Check the J Fiddle
The solution is to give the containing hyperlink for each thumbnail a width off 100%, and a height of 0. The square is calculated by a bottom padding of 100%. The image itself is applied as a background image to the hyperlink, and sized using the CSS property background-size.
While the above method works for containers that only hold a background image, as soon as content is put inside the container the height breaks (adding the height of the content to the dimensions of the container) and a perfect square is lost.
Here is another solution using flex box that can also perfectly center content within the container.Taking iot a step further, the following snippet creates a more repsonsive layout. Adjust the width for teh flex-items using media queries.
This is a usefull method for creating a featured flag overlayed on top of an image or content. The flag uses the CSS transform property, and is anchored to the left corner so that it remains in the same position on all screen sizes.
<span class="flag"> Featured </span>
background: #ff842c none repeat scroll 0 0;
padding: 10px 0;
transform-origin: left top 0;