Need help making testimonial slider code block responsive

yelahisabelle · February 27

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 February 27 by yelahisabelle

tuanphan · March 1

I see you disabled images on mobile. Do you still need help?

Need help making testimonial slider code block responsive

Recommended Posts

yelahisabelle

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tuanphan

Link to comment

Create an account or sign in to comment

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources