SnippetVamp - results

1 - grid responsive en 2 lignes

display:grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

2 - responsive image grid

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Grid</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/falls2.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
    <img src="/w3images/nature.jpg" style="width:100%">
    <img src="/w3images/mist.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/w3images/underwater.jpg" style="width:100%">
    <img src="/w3images/ocean.jpg" style="width:100%">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/mountainskies.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/underwater.jpg" style="width:100%">
  </div>  
  <div class="column">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/falls2.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
    <img src="/w3images/nature.jpg" style="width:100%">
    <img src="/w3images/mist.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/w3images/underwater.jpg" style="width:100%">
    <img src="/w3images/ocean.jpg" style="width:100%">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/mountainskies.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/underwater.jpg" style="width:100%">
  </div>
</div>

</body>
</html>

3 - Un site qui prend toute la hauteur disponible avec flexbox

<body>
	<div class="page">
		<header class="site-header"></header>

		<main class="site-content"></main>

		<footer class="site-footer"></footer>
	</div>
</body>
Nous allons donc simplement appliquer display: flex; à body, et spécifier le comportement de ses descendants direct en tant que colonnes. Puis nous diront simplement à .site-content d’utiliser toute la hauteur disponible.

CSS
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

4 - Carrousel sans js

<div class="carousel">
   <div class="carousel-inner">
       <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"/>
       <div class="carousel-item">
           <img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without">
       </div>
       <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""/>
       <div class="carousel-item">
           <img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript">
       </div>
       <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""/>
       <div class="carousel-item">
           <img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel">
       </div>
       <label for="carousel-3" class="carousel-control prev control-1">‹</label>
       <label for="carousel-2" class="carousel-control next control-1">›</label>
       <label for="carousel-1" class="carousel-control prev control-2">‹</label>
       <label for="carousel-3" class="carousel-control next control-2">›</label>
       <label for="carousel-2" class="carousel-control prev control-3">‹</label>
       <label for="carousel-1" class="carousel-control next control-3">›</label>
       <ol class="carousel-indicators">
           <li>
               <label for="carousel-1" class="carousel-bullet">•</label>
           </li>
           <li>
               <label for="carousel-2" class="carousel-bullet">•</label>
           </li>
           <li>
               <label for="carousel-3" class="carousel-bullet">•</label>
           </li>
       </ol>
   </div>
</div>


<style>html, body {
   margin: 0px;
   padding: 0px;
   background: url("http://digital.bnint.com/filelib/s9/photos/white_wood_4500x3000_lo_res.jpg");
}

.carousel {
   position: relative;
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
   margin-top: 26px;
}

.carousel-inner {
   position: relative;
   overflow: hidden;
   width: 100%;
}

.carousel-open:checked + .carousel-item {
   position: static;
   opacity: 100;
}

.carousel-item {
   position: absolute;
   opacity: 0;
   -webkit-transition: opacity 0.6s ease-out;
   transition: opacity 0.6s ease-out;
}

.carousel-item img {
   display: block;
   height: auto;
   max-width: 100%;
}

.carousel-control {
   background: rgba(0, 0, 0, 0.28);
   border-radius: 50%;
   color: #fff;
   cursor: pointer;
   display: none;
   font-size: 40px;
   height: 40px;
   line-height: 35px;
   position: absolute;
   top: 50%;
   -webkit-transform: translate(0, -50%);
   cursor: pointer;
   -ms-transform: translate(0, -50%);
   transform: translate(0, -50%);
   text-align: center;
   width: 40px;
   z-index: 10;
}

.carousel-control.prev {
   left: 2%;
}

.carousel-control.next {
   right: 2%;
}

.carousel-control:hover {
   background: rgba(0, 0, 0, 0.8);
   color: #aaaaaa;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
   display: block;
}

.carousel-indicators {
   list-style: none;
   margin: 0;
   padding: 0;
   position: absolute;
   bottom: 2%;
   left: 0;
   right: 0;
   text-align: center;
   z-index: 10;
}

.carousel-indicators li {
   display: inline-block;
   margin: 0 5px;
}

.carousel-bullet {
   color: #fff;
   cursor: pointer;
   display: block;
   font-size: 35px;
}

.carousel-bullet:hover {
   color: #aaaaaa;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
   color: #428bca;
}

#title {
   width: 100%;
   position: absolute;
   padding: 0px;
   margin: 0px auto;
   text-align: center;
   font-size: 27px;
   color: rgba(255, 255, 255, 1);
   font-family: 'Open Sans', sans-serif;
   z-index: 9999;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
</style>

5 - menu normal + select pour les mobiles

<nav> 

  <ul> 
    <li><a href="/" class="active">Home</a></li> 
    <li><a href="/collections/all">Books</a></li> 
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
    <li><a href="/pages/about-us">About Us</a></li> 
    <li><a href="/pages/support">Support</a></li> 
  </ul> 
  
  <select> 
    <option value="" selected="selected">Select</option> 
    
    <option value="/">Home</option> 
    <option value="/collections/all">Books</option> 
    <option value="/blogs/five-simple-steps-blog">Blog</option> 
    <option value="/pages/about-us">About Us</option> 
    <option value="/pages/support">Support</option> 
  </select> 

</nav>
And here is the CSS. Nothing complicated here: We hide the <select> by default, and only show it if the document width is smaller than 960px.

nav select {
  display: none;
}

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}

6 - Absolute Horizontal And Vertical Centering In CSS | Smashing Coding



.Absolute-Center {
  height: 100px; width:100px; /* width et height fixés */
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

/* dans un container */
.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}


/* centré dans le viewport*/
.Absolute-Center.is-Fixed {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 999;
}

/* version responsive */
.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 400px;
  max-width: 500px;
  padding: 40px;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

/* sur la droite */
.Absolute-Center.is-Right {
  width: 50%;
  height: 50%;
  margin: auto;
  overflow: auto;
  position: absolute;
  top: 0; left: auto; bottom: 0; right: 20px;
  text-align: right;
}

/* avec overflow */
.Absolute-Center.is-Overflow {
  width: 50%;
  height: 300px;
  max-height: 100%;
  margin: auto;
  overflow: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

/* pour les images */
.Absolute-Center.is-Image {
  width: 50%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}


/* utiliser max-height pour avoir une height variable (pas pour ie <9) */
.Absolute-Center.is-Variable {
  display: table;
  width: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

/* avecmarges négatives (pas responsive)*/ 
.is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}
      

/* via les css3 et transform */
.is-Transformed { 
	width: 50%;
	margin: auto;
	position: absolute;
	top: 50%; left: 50%;
	-webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}
      

transform

translate(-50%,-50%)

<div class="Pos-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
    &lt!-- CONTENT -->
    </div>
  </div>
</div>
      

.Pos-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}
      
/* grâce à flexbox */
.Pos-Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

7 - Détecter les navigateurs mobiles isMobileBrowser

function isMobileBrowser() {  
      return stristr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
      stristr($_SERVER['HTTP_USER_AGENT'],'iPod') || 
      stristr($_SERVER['HTTP_USER_AGENT'],'android');
}

8 - Gérer les débordements de texte & d'image

div{
// débordement
    word-wrap:break-word;
    overflow-wrap: break-word;

//césure
    -webkit-hyphens:auto;
    -moz-hyphens:auto;
    -ms-hyphens:auto;
}


img{
    max-width:100%;
    height:auto;
}

//pour ie8
.ie8 img{width:auto;}

9 - Forcer le viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">
ou 
@viewport{
    width: device-width;
    zoom:1;
}

Results for responsive : 9