Horje

Tips (Total 2)

1. How to create Full HTML Responsive with Desktop and Mobile
2. How to add Responsive Grid with Awesome Font

# Tips-1) How to create Full HTML Responsive with Desktop and Mobile

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.

How to create Grid Mobile and Desktop Ways

Try it.
index.html
Example: HTML 
<style>
body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

.container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.item {
  width: 100px;
  min-height: 100px;
  background: lightblue;
  border: solid 1px;
  border-radius: 6px;
}    
</style>






<main>
  <h2>Responsive Grid with No Media Queries</h2>
  
  <p>Resize the window to allow the grid items to break onto new lines. Notice the grid is fully responsive, with no need for any media queries.</p>

  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

</main>

Output should be:

How to create Grid Mobile and Desktop Ways

# Tips-2) How to add Responsive Grid with Awesome Font

Here is the best Example.

Example of Grid

See the example

index.html
Example: HTML 
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'>
  
<style>
body {
  font-style: normal;
  text-rendering: auto;
}

.flex-container {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  padding: 1px;
  max-width: 200px;
  height: auto;
  margin-top: 10px;
  font-weight: normal;
}

ul {
  list-style: none;
  line-height: 1.8em;
}

li {
  cursor: text;
  padding-right: 10px;
}

li:hover {
  color: #fff;
  background: #4B5B6C !important;
}

li:nth-child(even) {
  background: #C9CED3;
}

li:first-child {
  background: #fff !important;
  color: #000 !important;
  cursor: default;
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
}

i {
  position: relative;
  margin-right: 8px;
  margin-left: 8px;
}
</style>
  
  
</head>

<body translate="no">
  <div class="flex-container">
<ul class="flex-item">
<li>General Use</li>
<li><i class="fa fa-angle-double-left"></i>fa-angle-double-left</li>
<li><i class="fa fa-angle-double-right"></i>fa-angle-double-right</li>
<li><i class="fa fa-angle-double-down"></i>fa-angle-double-down</li>
<li><i class="fa fa-angle-double-up"></i>fa-angle-double-up</li>
<li><i class="fa fa-chevron-circle-left"></i>fa-chevron-circle-left</li>
<li><i class="fa fa-chevron-circle-right"></i>fa-chevron-circle-right</li>
<li><i class="fa fa-chevron-circle-down"></i>fa-chevron-circle-down</li>
<li><i class="fa fa-chevron-circle-up"></i>fa-chevron-circle-up</li>
<li><i class="fa fa-hand-o-right"></i>fa-hand-o-right</li>
<li><i class="fa fa-thumbs-up"></i>fa-thumbs-up</li>
<li><i class="fa fa-thumbs-o-up"></i>fa-thumbs-o-up</li>
<li><i class="fa fa-heart"></i>fa-heart</li>
<li><i class="fa fa-heart-o"></i>fa-heart-o</li>
<li><i class="fa fa-check"></i>fa-check</li>
<li><i class="fa fa-check-square"></i>fa-check-square</li>  
<li><i class="fa fa-check-square-o"></i>fa-check-square-o</li>
<li><i class="fa fa-check-circle"></i>fa-check-circle</li>
<li><i class="fa fa-check-circle-o"></i>fa-check-circle-o</li>
</ul>
<ul class="flex-item">
<li>Events</li>
<li><i class="fa fa-info"></i>fa-info</li>
<li><i class="fa fa-info-circle"></i>fa-info-circle</li>
<li><i class="fa fa-question"></i>fa-question</li>  
<li><i class="fa fa-question-circle"></i>fa-question-circle</li>
<li><i class="fa fa-binoculars"></i>fa-binoculars</li>
<li><i class="fa fa-ticket"></i>fa-ticket</li>
<li><i class="fa fa-compass"></i>fa-compass</li>
<li><i class="fa fa-cab"></i>fa-cab</li>
<li><i class="fa fa-automobile"></i>fa-automobile</li>
<li><i class="fa fa-car"></i>fa-car</li>
<li><i class="fa fa-bicycle"></i>fa-bicycle</li>
<li><i class="fa fa-building"></i>fa-building</li>
<li><i class="fa fa-building-o"></i>fa-building-o</li>
<li><i class="fa fa-home"></i>fa-home</li>
<li><i class="fa fa-hotel"></i>fa-hotel</li>
<li><i class="fa fa-bed"></i>fa-bed</li>
<li><i class="fa fa-map-marker"></i>fa-map-marker</li>
<li><i class="fa fa-location-arrow"></i>fa-location-arrow</li>
</ul>
<ul class="flex-item">
<li>Communication</li>
<li><i class="fa fa-mail-forward"></i>fa-mail-forward</li>
<li><i class="fa fa-share"></i>fa-share</li>
<li><i class="fa fa-share-square"></i>fa-share-square</li>
<li><i class="fa fa-share-square-o"></i>fa-share-square-o</li>
<li><i class="fa fa-share-alt"></i>fa-share-alt</li>
<li><i class="fa fa-share-alt-square"></i>fa-share-alt-square</li>
<li><i class="fa fa-comment"></i>fa-comment</li>
<li><i class="fa fa-comment-o"></i>fa-comment-o</li>
<li><i class="fa fa-comments"></i>fa-comments</li>
<li><i class="fa fa-comments-o"></i>fa-comments-o</li>
<li><i class="fa fa-envelope"></i>fa-envelope</li>
<li><i class="fa fa-envelope-o"></i>fa-envelope-o</li>
<li><i class="fa fa-envelope-square"></i>fa-envelope-square</li>
<li><i class="fa fa-inbox"></i>fa-inbox</li>
<li><i class="fa fa-send"></i>fa-send</li>
<li><i class="fa fa-send-o"></i>fa-send-o</li>
<li><i class="fa fa-download"></i>fa-download</li>
<li><i class="fa fa-upload"></i>fa-upload</li></ul>
<ul class="flex-item">
<li>Comm. Continued</li>
<li><i class="fa fa-phone"></i>fa-phone</li>
<li><i class="fa fa-phone-square"></i>fa-phone-square</li>
<li><i class="fa fa-calendar"></i>fa-calendar</li>
<li><i class="fa fa-calendar-o"></i>fa-calendar-o</li>
<li><i class="fa fa-gift"></i>fa-gift</li>
<li><i class="fa fa-graduation-cap"></i>fa-graduation-cap</li>
<li><i class="fa fa-camera"></i>fa-camera</li>
<li><i class="fa fa-umbrella"></i>fa-umbrella</li>
<li><i class="fa fa-star"></i>fa-star</li>
<li><i class="fa fa-star-o"></i>fa-star-o</li>
<li><i class="fa fa-facebook"></i>fa-facebook</li>
<li><i class="fa fa-facebook-square"></i>fa-facebook-square</li>
<li><i class="fa fa-twitter"></i>fa-twitter</li>
<li><i class="fa fa-twitter-square"></i>fa-twitter-square</li>
<li><i class="fa fa-youtube"></i>fa-youtube</li>
<li><i class="fa fa-youtube-square"></i>fa-youtube-square</li>
<li><i class="fa fa-instagram"></i>fa-instagram</li>
<li><i class="fa fa-skype"></i>fa-skype</li>
</ul>
<ul class="flex-item">
<li>Other</li>
<li><i class="fa fa-smile-o"></i>fa-smile-o</li>
<li><i class="fa fa-meh-o"></i>fa-meh-o</li>
<li><i class="fa fa-frown-o"></i>fa-frown-o</li>
<li><i class="fa fa-cog"></i>fa-cog</li>
<li><i class="fa fa-gear"></i>fa-gear</li>
<li><i class="fa fa-cogs"></i>fa-cogs</li>
<li><i class="fa fa-gears"></i>fa-gears</li>
<li><i class="fa fa-gavel"></i>fa-gavel</li>
<li><i class="fa fa-bell"></i>fa-bell</li>
<li><i class="fa fa-bell-o"></i>fa-bell-o</li>
<li><i class="fa fa-exclamation"></i>fa-exclamation</li>
<li><i class="fa fa-exclamation-circle"></i>fa-exclamation-circle</li>
<li><i class="fa fa-exclamation-triangle"></i>fa-exclamation-triangle</li>
<li><i class="fa fa-warning"></i>fa-warning</li>
<li><i class="fa fa-close"></i>fa-close</li>
<li><i class="fa fa-times"></i>fa-times</li>
<li><i class="fa fa-times-circle"></i>fa-times-circle</li>
<li><i class="fa fa-times-circle-o"></i>fa-times-circle-o</li>
</div>
  
  
</body>

</html>

Output should be:



 

Horje