yelahisabelle

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!

Thank you so much!!

Just added it to the post 🙂

I'm trying to convert this codepen button style in a way that Squarespace recognizes. I don't need the gradient background or gradient outline. Thank you! https://codepen.io/codewithdeveloper/pen/GRPwRaN

It's https://brass-olive-533z.squarespace.com/brooke-website-template 🙂

Trying to style an add to cart button link that I've added to a page via code block. I'd like it to fit 100% of the block. Here is the button code: <div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-button-element--primary use-form" role="button" tabindex="0" data-dynamic-strings="" data-collection-id="6572542e6741e618d3915718" data-item-id="6572542e6741e618d3915717" data-product-type="1" data-use-custom-label="false" data-original-label="Add To Cart" data-form="{&quot;id&quot;:&quot;6573cc3995a7545509728421&quot;,&quot;name&quot;:&quot;Squarespace 7.1 Template&quot;,&quot;fields&quot;:[&quot;{\&quot;type\&quot;:\&quot;radio\&quot;,\&quot;id\&quot;:\&quot;radio-yui_3_17_2_1_1702087157555_8742\&quot;,\&quot;locked\&quot;:false,\&quot;title\&quot;:\&quot;This template is only available for Squarespace 7.1\&quot;,\&quot;description\&quot;:\&quot;\&quot;,\&quot;options\&quot;:[\&quot;Got it!\&quot;],\&quot;required\&quot;:true,\&quot;radio\&quot;:true}&quot;,&quot;{\&quot;type\&quot;:\&quot;email\&quot;,\&quot;id\&quot;:\&quot;email-yui_3_17_2_1_1702087157555_11334\&quot;,\&quot;locked\&quot;:false,\&quot;title\&quot;:\&quot;What is the email address associated with your Squarespace account?\&quot;,\&quot;description\&quot;:\&quot;This is the address I will send the template to.\&quot;,\&quot;placeholder\&quot;:\&quot;email@emailaddress.com\&quot;,\&quot;required\&quot;:true,\&quot;email\&quot;:true}&quot;,&quot;{\&quot;type\&quot;:\&quot;radio\&quot;,\&quot;id\&quot;:\&quot;radio-yui_3_17_2_1_1702087157555_15900\&quot;,\&quot;locked\&quot;:false,\&quot;title\&quot;:\&quot;Your Template will be sent to you as a new website with a 6 month free trial on Squarespace\&quot;,\&quot;description\&quot;:\&quot;\&quot;,\&quot;options\&quot;:[\&quot;I understand!\&quot;],\&quot;required\&quot;:true,\&quot;radio\&quot;:true}&quot;,&quot;{\&quot;type\&quot;:\&quot;text\&quot;,\&quot;id\&quot;:\&quot;text-yui_3_17_2_1_1702087157555_20287\&quot;,\&quot;locked\&quot;:false,\&quot;title\&quot;:\&quot;What will your website URL be?\&quot;,\&quot;description\&quot;:\&quot;I love to see what you create with my designs! (optional)\&quot;,\&quot;placeholder\&quot;:\&quot;\&quot;,\&quot;required\&quot;:false,\&quot;text\&quot;:true}&quot;],&quot;parsedFields&quot;:[],&quot;submitButtonText&quot;:&quot;Submit&quot;,&quot;submissionMessage&quot;:&quot;{\&quot;html\&quot;:\&quot;Thank you!\&quot;}&quot;,&quot;disclaimerMessage&quot;:&quot;null&quot;,&quot;successRedirect&quot;:&quot;&quot;,&quot;captchaEnabled&quot;:false,&quot;captchaTheme&quot;:1,&quot;captchaAlignment&quot;:1}" id="yui_3_17_2_1_1702087758200_409"> <div class="sqs-add-to-cart-button-inner">Add To Cart</div> </div> Thank you!