[Responsive]Page Personnalisation

wp-content/themes/nap/assets/css/main.css

@@ -192,6 +192,7 @@ select,option{
   position: relative;
   line-height: 0px;
   margin-bottom: 21px;
+  width: 69%;
 }
 .file-p{
   position: absolute !important;
@@ -2053,6 +2054,7 @@ label.chevron.bottom::first-letter {
   max-width: 358px;
   top: 67px;
   left: 40px;
+  z-index: 99;
 }
 .floated-bloc h2{
   font-family: 'Crete Round';

wp-content/themes/nap/assets/css/responsive.css

@@ -68,7 +68,11 @@
 	.product-info {
 		width: 65%;
 	}
-	/*Home*/
+	/*Uniqpaper*/
+
+	.form-wrapper {
+		padding: 80px 20px 20px;
+	}
 }
 /* ------------------------*/ /* ---------->>> 1024 <<<-----------*/ /* ------------------------*/
 
@@ -78,6 +82,21 @@
 		width: 40%;
 		padding: 65px 20px;
 	}
+	/*Uniqpaper*/
+	#uniqpaper .right-container .left-panel {
+		width: 34%;
+	}
+	.floated-bloc{
+		left: 20px;
+		max-width: 80%;
+	}
+	.floated-bloc h2{
+		font-size: 30px;
+		line-height: 36px;
+	}
+	.floated-bloc .text-content{
+		padding: 28px 16px;
+	}
 }
 /* ------------------------*/ /* ---------->>> 860 <<<-----------*/ /* ------------------------*/
 @media screen and (min-width: 861px) {
@@ -86,10 +105,26 @@
 	}
 }
 @media screen and (max-width: 860px) {
+	/* general */
 	.display--only-mobile{
 		display: block;
 	}
-	/*Helper*/
+	.container-bg{
+		left: 0;
+		height: 100%;
+		width: 100% !important;
+	}
+	.right-container{
+		width: 100% !important;
+	}
+	.right-panel{
+		width: 100% !important;
+		float: none;
+	}
+	.rounded{
+		padding: 8px 22px 11px;
+	}
+	/* Helper */
 	.close-btn{
 		top: 15px;
 		width: 37px;
@@ -102,7 +137,7 @@
 		height: 15px;
 		top: 11px;
 	}
-	/*Header*/
+	/* Header */
 	.nav-content{
 		display: none;
 		padding-left:40px;
@@ -150,9 +185,69 @@
 		margin: 0 auto;
 	}
 	.news-header h2{
-		    font-size: 18px;
-    line-height: 21px;
-        letter-spacing: 0px;
+		font-size: 18px;
+		line-height: 21px;
+		letter-spacing: 0px;
+	}
+	/*Uniqpaper*/
+	#uniqpaper .right-container .left-panel {
+		position: relative;
+		width: 100%;
+		left: initial !important;
+	}
+	.floated-bloc{
+		position: relative !important;
+		left: initial;
+		top: initial;
+		margin: 0 auto;
+		padding: 51px 0px;
+		max-width: 65%;
+	}
+	.floated-bloc .text-content{
+		margin-top: 6px;
+		padding: 20px 16px;
+	}
+	/* form */
+	.form-wrapper{
+		padding: 23px 20px 20px;
+	}
+	.half-col{
+		width: 100%;
+	}
+	.coord {
+		width: 76%;
+		margin: 0 auto;
+		padding-bottom: 20px;
+	}
+	.files{
+		width: 64%;
+		margin-left: 7px;
+	}
+	.file-wrapper{
+		margin-top: 24px;
+	}
+	.image-icon {
+		height: 86px;
+		width: 86px;
+		background-size: 86px;
+	}
+	.form-wrapper h2{
+		padding-bottom: 21px;
+	}
+	select, input[type ="text"], 
+	input[type="email"], 
+	input[type="tel"], 
+	input[type="password"], 
+	textarea{
+		line-height: 25px;
+		padding: 0 14px 3px;
+	}
+	textarea{
+		width: 80%;
+		display: block;
+		margin: 0 auto;
+		line-height: 13px;
+		padding-top: 9px;
 	}
 	/*footer*/
 	footer .footer{
@@ -162,7 +257,9 @@
 /*END (max-width: 860px) */
 /* ------------------------*/ /* ---------->>> 620 <<<-----------*/ /* ------------------------*/
 @media screen and (max-width: 620px) {
-
+	.floated-bloc{
+		max-width: 85%;
+	}
 }
 /* ------------------------*/ /* ---------->>> 420 <<<-----------*/ /* ------------------------*/
 @media screen and (max-width: 420px) {

wp-content/themes/nap/assets/js/main.js

@@ -314,16 +314,27 @@ $(document).on('click', '.moveDown', function(){
 });
 }
 $.fn.getMenuBg = function(){
-	var imgSrc = $('header .nav-content > ul').find(' > li.current').data('img');
-	navwWidth = $('.nav-wrapper').width();
+	var imgSrc = $('header .nav-content > ul').find(' > li.current').data('img'),
+	windowWidth = $(window).width(),
+	navwWidth = $('.nav-wrapper').width(),
+	navHeight = $('.nav-header').outerHeight();
 	$('.container-bg').css({
 		'background-image': "url("+ imgSrc +")",
 		'opacity' : 0,
 	})
 	tlBg = new TimelineMax();	
-	tlBg.to('.container-bg',0.9,{opacity:1},0.5);	
-	tlBg.to('.container-bg',1.2,{width:navwWidth},0.4);
+	tlBg.to('.container-bg',0.9,{opacity:1},0.5);
 	tlBg.from('.full-slides',1.2,{opacity:0, width:0},0.4);
+	if (windowWidth > 860){
+		tlBg.to('.container-bg',1.2,{width:navwWidth},0.4);
+			tlBg.to('.container-bg',0,{height:'100%'},0);
+			$('.main').css('padding-top',0);
+	}else{
+		$('.main').css('padding-top',navHeight);
+		tlBg.to('.container-bg',0,{height:navHeight},0);
+	}
+	
+	
 }
 	//Responsive function 
 	$.fn.responsive = function(){
@@ -354,6 +365,7 @@ $.fn.getMenuBg = function(){
 		if (lastSectionHeight < windowHeight - footerHeight)
 			$('#catalogue .panel-content section').last().height(2 * windowHeight/3 - footerHeight );
 		checkFooterNavPosition();
+		$.fn.getMenuBg(); //Animation BG Menu
 	}
 	//Wordpress js login
 	$('#user_login').attr('placeholder', 'Identifiant');
@@ -488,13 +500,17 @@ $(window).load( function() {
 var timer;
 $(window).scroll(function(e) {
 	onScroll(e);
-	var downBTN = $('.home-down-wrapper').offset().top;
-	if ($(window).scrollTop() > downBTN - $('.nav-header').outerHeight()) {
-		$('.home-footer-nav .nav-wrapper').addClass('fixed');
-	}
-	else {
-		$('.home-footer-nav .nav-wrapper').removeClass('fixed');
+	var elem = $('.home-down-wrapper');
+	if (elem.length){
+		var downBTN = $('.home-down-wrapper').offset().top;
+		if ($(window).scrollTop() > downBTN - $('.nav-header').outerHeight()) {
+			$('.home-footer-nav .nav-wrapper').addClass('fixed');
+		}
+		else {
+			$('.home-footer-nav .nav-wrapper').removeClass('fixed');
+		}
 	}
+	
 });
 //$(window).bind("scrollStop",onScroll)
 $(document).ready(function(){
@@ -518,7 +534,6 @@ $(document).ready(function(){
 	$('.filter-wrapper').open_filter();
 	$.fn.responsive();
 	$.fn.showSubmenu(); //Catalog subMenu
-	$.fn.getMenuBg(); //Animation BG Menu
 	$('#fullpage').fullpageSlide(); //Stories
 	$.fn.responsive();
 	$('.list-color-filter li').setBgColorList();