Jump to content

Need help making testimonial slider code block responsive

Recommended Posts

I'm trying to adjust this codepen (https://codepen.io/md-aqil/pen/abOVOKe) to be responsive on mobile. 

This is the site I'm currently testing code block on:

https://sheep-wolf-dr4j.squarespace.com/tester password: elder

Current code on my tester page (this is what I want it to look like, just need this coded for mobile as well):

<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://md-aqil.github.io/images/swiper.min.css">
	<title>Document</title>
		
<section class="spacer">
			
				<div class="testimonial-section">
					<div class="testi-user-img">
					<div class="swiper-container gallery-thumbs">
						  <div class="swiper-wrapper">
								  <div class="swiper-slide">
										<img class="u3" src="https://md-aqil.github.io/images/2091127763_1_1_1.jpg" alt="">
									</div>
						  <div class="swiper-slide">
							  <img class="u1" src="https://md-aqil.github.io/images/beautiful-beauty-face-2657838.jpg" alt="">
						  </div>
						  <div class="swiper-slide">
						  <img class="u2" src="https://md-aqil.github.io/images/attractive-beautiful-beauty-1986684.jpg" alt="">
						  </div>
					  
						  <div class="swiper-slide">
						  <img class="u4" src="https://md-aqil.github.io/images/beautiful-beauty-face-2657838.jpg" alt="">
						  </div>
						  
						  </div>
					  </div>
					</div>
					<div class="user-saying">
						  <div class="swiper-container testimonial">
								  <!-- Additional required wrapper -->
								  <div class="swiper-wrapper ">
									  <!-- Slides -->
									  <div class="swiper-slide">
										  <div class="quote">
                                            <center>
												 <h2><i>Lalalal</i></h2>
                                            <p>
													  “This is best and biggest unified platform
											  for instant online admission. We can easily
											  take admission for any course in any institute..“
                                           <center>
                                                <p>
											  <div class="name"><center>Ramkishor Verma</center></div>
											  <div class="designation"><center>University Student</center></div>
                                            
										  </div>
									  </div>
									  <div class="swiper-slide">
										  <div class="quote">
                                            <center>
												 <h2><i>Lalalal</i></h2>
                                            <p>
													  “This is best and biggest unified platform
											  for instant online admission. We can easily
											  take admission for any course in any institute..“
                                           <center>
                                                <p>
											  <div class="name"><center>Ramkishor Verma</center></div>
											  <div class="designation"><center>University Student</center></div>
                                            
										  </div>
									  </div>
									  <div class="swiper-slide">
										  <div class="quote">
                                            <center>
												 <h2><i>Lalalal</i></h2>
                                            <p>
													  “This is best and biggest unified platform
											  for instant online admission. We can easily
											  take admission for any course in any institute..“
                                           <center>
                                                <p>
											  <div class="name"><center>Ramkishor Verma</center></div>
											  <div class="designation"><center>University Student</center></div>
                                            
										  </div>
									  </div>
									  <div class="swiper-slide">
											  <div class="quote">
                                            <center>
												 <h2><i>Lalalal</i></h2>
                                            <p>
													  “This is best and biggest unified platform
											  for instant online admission. We can easily
											  take admission for any course in any institute..“
                                           <center>
                                                <p>
											  <div class="name"><center>Ramkishor Verma</center></div>
											  <div class="designation"><center>University Student</center></div>
                                            
										  </div>
									  </div>
									  
								  </div>
								  <!-- If we need pagination -->
								  <div class="swiper-pagination swiper-pagination-white"></div>
							  
							  </div>
					</div>
				</div>
			</section>
	<script src="https://md-aqil.github.io/images/swiper.min.js"></script>

 <style>
   body {
			margin: 0;
			padding: 0;
			font-family: 'Soleil', sans-serif;

		}
		:root {
			--dark-green: #30261a;
      --dark-yellow: #30261a;
      --extra-light-brown:#30261a;
      --light-brown: #30261a;
      --dark-brown:#30261a;
      --light-yellow:#30261a;
      --light-red:#30261a;
      --light-teal:#30261a;
      --light-gray:#30261a;
			--theme-color2: #fbf8f1;
		}


 .site-logo {
	 width: 218.33px !important;
	 margin-right: 50px;
}
 .btn {
	 border-radius: 5px;
	 font-weight: normal;
	 font-size: 15px;
	 letter-spacing: 0.02em;
	 line-height: 12px;
	 text-align: center;
	 font-weight: 600;
	 font-size: 14px;
	 padding: 14px 30px;
	 cursor: pointer;
}
 .btn-theme {
	 background: var(--theme-color1);
	 color: #30261a;
}

.c-container {
    margin: auto;
    width: 93%;
    position: relative;
    z-index: 1;
}

.btn-outline-white {
    color: #30261a;
    background-color: rgba(255, 255, 255, 0.1);
    background-image: none;
    border-width: 2px;
    border-color: #30261a;
    font-weight: 500;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.btn {
    border-radius: 5px;
    font-weight: normal;
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 30px;
    cursor: pointer;
}
.btn-outline-white:hover {
    background-color: #30261a;
    color: var(--text-dark);
}
/* common css up */

.testimonial p {
  color: #30261a;
	 font-size: 12px;
	 letter-spacing: 0.02em;
	 line-height: 35px;
}
 .testimonial .name {
   color: #30261a;
   text-transform: uppercase;
	 font-weight: bold;
	 font-size: 14px;
	 letter-spacing: 0.04em;
	 line-height: 35px;
	 text-align: left;
   padding-top:25px;
}
 .testimonial .designation {
	 font-size: 14px;
	 letter-spacing: 0.04em;
	 text-align: left;
	 color: #30261a;
	 opacity: 0.65;
}
 .unt {
	 margin-bottom: 0px;
	 margin-top: 60px;
}
 .hero-text {
	 font-size: 25px;
	 letter-spacing: 0.02em;
	 color: #30261a;
}
 .gallery-thumbs {
	 height: 100%;
}
 .gallery-thumbs .swiper-wrapper {
	 align-items: center;
}
 .gallery-thumbs .swiper-slide {
	 background-position: center;
	 background-size: cover;
	 width: 250px !important;
	 height: 350px;
	 position: relative;
   
}
 .gallery-thumbs .swiper-slide img {
	 filter: saturate(0.3) contrast(0.7);
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 border-radius: 0px;
   border: 1px solid #30261a;
}
 .gallery-thumbs .swiper-slide-active img {
	 filter: contrast(1) saturate(1) !important;
}
 .flex-row {
	 display: -webkit-box;
	 display: -ms-flexbox;
	 display: flex;
	 -ms-flex-wrap: wrap;
	 flex-wrap: wrap;
	 margin-right: -15px;
	 margin-left: -15px;
}
 .flex-row .flex-col {
	 -ms-flex-preferred-size: 0;
	 flex-basis: 0;
	 -webkit-box-flex: 1;
	 -ms-flex-positive: 1;
	 flex-grow: 1;
	 max-width: 100%;
	 position: relative;
	 width: 100%;
	 min-height: 1px;
	 padding-right: 15px;
	 padding-left: 15px;
}

.gallery-thumbs .swiper-wrapper {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}


.testimonial-section .quote {
    width: 75%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 100px;
    padding-right: 100px;
  border-left: 1px solid #30261a;
}
.swiper-container.testimonial {
    height: 62vh;
}
.testimonial-section .user-saying {
    background: var(--theme-color2);
    width: 60%;
    color: #30261a;
    height: 50%;
}
.testi-user-img {
    width: 40%;
}
.testimonial-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    height: 60%;
}
.testimonial-section .quote p {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.8;
    font-style: normal;
    margin: 0;
}
.quote-icon {
    width: 38px;
    display: block;
    margin-bottom: 30px;
}
 </style>
 <script>
     var galleryThumbs = new Swiper('.gallery-thumbs', {
	effect: 'coverflow',
	grabCursor: true,
	centeredSlides: true,
	slidesPerView: '2',
	// coverflowEffect: {
	//   rotate: 50,
	//   stretch: 0,
	//   depth: 100,
	//   modifier: 1,
	//   slideShadows : true,
	// },
	
	coverflowEffect: {
        rotate: 0,
        stretch: 0,
        depth: 50,
        modifier: 6,
        slideShadows : false,
	  },
	  
  });
  
  
var galleryTop = new Swiper('.swiper-container.testimonial', {
	speed: 400,
	spaceBetween: 50,
	autoplay: {
	  delay: 3000,
	  disableOnInteraction: false,
	},
	direction: 'vertical',
	pagination: {
	  clickable: true,
	  el: '.swiper-pagination',
	  type: 'bullets',
	},
	thumbs: {
		swiper: galleryThumbs
	  }
  });
  
 </script>

Ideally, I would like the images to be above the text, and the slider dots to be below the text, but having them next to each other, just smaller, is fine as well. I'm willing to donate to anyone who is able to help me out with this via paypal or venmo. Thank you!

Edited by yelahisabelle
Link to comment
  • yelahisabelle changed the title to Need help making testimonial slider code block responsive
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.