CSS & HTML Only – Responsive background image in panel heading & Profile Photo

I made a simple example of a beautiful, responsive and fast panel with a responsive cover photo and a circle photo, this type of design I use on my projects when I wand to represent the TEAM page or CONTACT person.

You can simply modify the size and style of the panel, also, you can add or remove the shadow around the profile photo, change the background cover and the cute cat profile photo.

Check the Source of the demo and give it a try, if you have any other questions, you can simply drop me a line via email…



Best responsive CSS framework so far

There are a lot of CSS frameworks that use a grid system to display content on mobile and desktop(eg.: Bootstrap, Foundation…) but why load a lot of styles that you don’t need on your project? For example a series of form styles when you only need a simple Material Design form?

Lately I discovered Simple Grid, a simple, minimalistic responsive css framework that delivers only the basic functions of the grid.

You can take a look here: http://simplegrid.io/

Viewport-percentage lengths: the vw, vh, vmin, vmax units

Excerpt from w3.org:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.

When I design a new layout, I’ll keep in mind this option because it’s pretty handy if we think in terms of responsive design.

vw unit: Equal to 1% of the width of the initial containing block.
vh unit: Equal to 1% of the height of the initial containing block.
vmin unit: Equal to the smaller of vw or vh.
vmax unit: Equal to the larger of vw or vh.

Here is my CSS:

Here is the HTML code:

Try it Yourself / Demo

Bootstrap – One Page Website Template

S1ngletone is a responsive, one page theme created with the popular Bootstrap Framework by CosminR. The theme features multiple content sections with an off canvas navigation menu and a responsive Google Maps section.

Main features include:

  • Meta tags for SEO and content (twitter cards, open graph tags)
  • Responsive Google Map (the pointer remains on the center of the page as you scale the window)
  • Font Awesome and Glyphicons

S1ngletone was built with:

S1ngletone uses plain html, css and JavaScript, there is no need for a server or compiler to use the template. Just open the index.html file in a browser and you can see the template working. Edit index.html, css or JS files to personalise the template.

See a live DEMO or Download the files.

Make div Disappear with CSS Media Queries on Screen Width

This simple example will show you how to make a div disappear with CSS Media Queries on screen width.

How can you make a div content disappear when the screen reaches a certain width using media queries? The answer is quite simple, you use CSS and display: none property.

Let’s say that you have a div that needs to disappear when someone is accessing your webpage from a tablet or mobile phone.

You can use this list of common resolutions to figure out if you want to hide or display certain parts of your website.

To hide a particular object you can use a class or id this way:

You can mix the size variable to fit your needs by modifying the @media screen and (max-width: 1124px)

See a live DEMO of various screen sizes.

Responsive Google Map (Javascript & Google API V3)

This tutorial uses HTML5 and JavaScript to implement a responsive Google Maps map, no iframes or css code needed.

The main idea of this tutorial is to make the pointer on the map responsive / keep the pointer fixed on the chosen location on the map as we change the size of the window/map layout

Implementation guide

  • Get a Key/Authentication – Google Maps JavaScript API here
  • Edit the header line https://maps.googleapis.com/maps/api/js?key=[KEY]&callback=initMap and replace [KEY] with your unique Google Maps Key
  • Use Google Maps or other aplication to find the GPS coordinates of the location/pointer on the map and paste them on line 22 and 32 here like this: new google.maps.LatLng(51.506767, -0.1244953)


See a live DEMO or Download the code.