3 replies [Last post]
modriits
modriits's picture
Offline
newbie
Last seen: 7 years 20 weeks ago
Timezone: GMT+3
Joined: 2014-08-14
Posts: 2
Points: 3

HOW DO I MAKE THIS RESPONSIVE??? ↓
Help PLS!
http://nordagri.com/test/wp-content/themes/dazzling/headflip/index.html

modriits
modriits's picture
Offline
newbie
Last seen: 7 years 20 weeks ago
Timezone: GMT+3
Joined: 2014-08-14
Posts: 2
Points: 3

modriits wrote: HOW DO I MAKE

modriits wrote:

HOW DO I MAKE THIS RESPONSIVE??? ↓
Help PLS!
http://nordagri.com/test/wp-content/themes/dazzling/headflip/index.html

HERE IS THE CODE

<style>
 
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}
 
.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}
 
/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
 
	position: relative;
}
 
/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;
 
	position: absolute;
	top: 0;
	left: 0;
}
 
/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}
 
/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
}
 
/* 
	Some vertical flip updates 
*/
.vertical.flip-container {
	position: relative;
}
 
	.vertical .back {
		transform: rotateX(180deg);
	}
 
	.vertical.flip-container:hover .back {
	    transform: rotateX(0deg);
	}
 
	.vertical.flip-container:hover .front {
	    transform: rotateX(180deg);
	}
 
</style>
 
<a href="google.com"><img  src="head_ban.png"/></br></a>
 
<div style="position: absolute; top: 271px; left: 8px;" class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content --><a href="http://www.w3schools.com"><img  src="green.png"/></a>
		</div>
		<div class="back">
			<!-- back content --><a href="http://www.w3schools.com"><img src="green2.png"/></a>
		</div>
	</div>
</div>
 
<div style="position: absolute; top: 272px; left: 307.5px;"  class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content --><a href="http://www.w3schools"><img src="blue.png"/></a>
		</div>
		<div class="back">
			<!-- back content --><a href="http://www.w3schools"><img src="blue2.png"/></a>
		</div>
	</div>
</div>
 
<div  style="position: absolute; top: 246px; left: 608px;" class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content --><a href="http://www.w3schools"><img src="brown.png"/></a>
		</div>
		<div class="back">
			<!-- back content --><a href="http://www.w3schools"><img src="brown2.png"/></a>
		</div>
	</div>
</div>
 
<div style="position: absolute; top: 246px; left: 908px;" class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content --><a href="http://www.w3schools"><img src="red.png"/></a>
		</div>
		<div class="back">
			<!-- back content --><a href="http://www.w3schools"><img src="red2.png"/></a>
		</div>
	</div>
</div>
</br>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

hi modriits Avoid absolute

hi modriits
Avoid absolute values (px) for width, height and position values.
Use % and em instead.

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 6 years 13 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

Use Twitter bootstrap for

Use Twitter bootstrap for responsive site. this is the best way for creating a responsive site.
or otherwise Add meta view name and content,device width in the html header tag.

And then Add the @media query for different device width.
Use pixel value as %.