lko Comments - Answer Overflow

/* Testimonial.css */
.testimonial-carousel {
    overflow: hidden;
    position: relative;
    width: 60%;
    margin: auto;
    height: 70vh;
  }

  .testimonial-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 400%; 
    margin-top: 2.5rem;
  }

  .testimonial {
    min-width: 100%;
    transition: opacity 0.5s ease-in-out;
    box-sizing: border-box;
    padding: 0 1rem;
  }

  .client-text {
    text-align: justify;
    width: 100%;
    padding: 0.5rem;
    font-size: 1.3rem;
    line-height: 1.5;
}

  .visible {
    opacity: 1;
  }

  @media screen and (max-width:930px) {
  .testimonial-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: auto;
    height: 60vh;
  }

  .client-text {
    text-justify: auto;
    width: 100%;

    font-size: 1rem;
    line-height: 1;

  }
  .testimonial {
    width: 100%;
    max-width: 100%;
    transition: opacity 0.5s ease-in-out;
  }


  }

  @media screen and (max-width: 480px)  {
  .testimonial-carousel {
    overflow: hidden;
    position: relative;
    width: 80%;
    margin: auto;
    height:  60vh;
  }

  .client-text {
    text-justify: auto;
    width: 80%;
    font-size: 1rem;
    line-height: 1;

  }
  .testimonial {
    width: 100%;
    transition: opacity 0.5s ease-in-out;
  }


  }

/* Testimonial.css */
.testimonial-carousel {
    overflow: hidden;
    position: relative;
    width: 60%;
    margin: auto;
    height: 70vh;
  }

  .testimonial-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 400%; 
    margin-top: 2.5rem;
  }

  .testimonial {
    min-width: 100%;
    transition: opacity 0.5s ease-in-out;
    box-sizing: border-box;
    padding: 0 1rem;
  }

  .client-text {
    text-align: justify;
    width: 100%;
    padding: 0.5rem;
    font-size: 1.3rem;
    line-height: 1.5;
}

  .visible {
    opacity: 1;
  }

  @media screen and (max-width:930px) {
  .testimonial-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: auto;
    height: 60vh;
  }

  .client-text {
    text-justify: auto;
    width: 100%;

    font-size: 1rem;
    line-height: 1;

  }
  .testimonial {
    width: 100%;
    max-width: 100%;
    transition: opacity 0.5s ease-in-out;
  }


  }

  @media screen and (max-width: 480px)  {
  .testimonial-carousel {
    overflow: hidden;
    position: relative;
    width: 80%;
    margin: auto;
    height:  60vh;
  }

  .client-text {
    text-justify: auto;
    width: 80%;
    font-size: 1rem;
    line-height: 1;

  }
  .testimonial {
    width: 100%;
    transition: opacity 0.5s ease-in-out;
  }


  }

26 replies

KPCKevin Powell - Community

•Created by Youseeit'sme on 7/6/2024 in #front-end

Paragraphs displayed partially in smaller screen

import React, { useState, useEffect } from "react";
import { Testimonials } from "../data";
import '../styles/Testimonial.css';

import client1 from '../assets/img/agents/agent9.png';
import client2 from '../assets/img/agents/agent1.png';
import client3 from '../assets/img/agents/agent3.png';
import client4 from '../assets/img/agents/agent4.png';

const testimonialImages = [client1, client2, client3, client4];

export default function TestimonialCarousel() {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => {
        return prevIndex === 0 ? Testimonials.length - 1 : prevIndex - 1;
      });
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    <>
    <h1 className="text-2xl font-bold mt-20 text-center text-white">Testimonials</h1>

    <div className="testimonial-carousel flex items-center justify-center h-[400px] sm:h-[400px] overflow-hidden">

      <div
        className="flex transition-transform ease-in-out duration-500"
        style={{ transform: translateX(-${currentIndex * 100}%) }}
      >
        {Testimonials.map((testimonial) => (
          <div
            key={testimonial.id}
            className="testimonial bg-transparent text-white flex flex-col items-center justify-center mx-auto"
          >
            <p className="client-text">
              "{testimonial.text}"
            </p>
            <div className="client-info flex-col items-center text-2xl font-bold mt-12">
              <img
                src={testimonialImages[testimonial.id - 1]}
                alt="Client"
                className="w-16 h-16 mx-auto flex justify-center rounded-full"
              />
              <span className="mt-6 ml-2">{testimonial.client}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
    </>

  );
}

import React, { useState, useEffect } from "react";
import { Testimonials } from "../data";
import '../styles/Testimonial.css';

import client1 from '../assets/img/agents/agent9.png';
import client2 from '../assets/img/agents/agent1.png';
import client3 from '../assets/img/agents/agent3.png';
import client4 from '../assets/img/agents/agent4.png';

const testimonialImages = [client1, client2, client3, client4];

export default function TestimonialCarousel() {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => {
        return prevIndex === 0 ? Testimonials.length - 1 : prevIndex - 1;
      });
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    <>
    <h1 className="text-2xl font-bold mt-20 text-center text-white">Testimonials</h1>

    <div className="testimonial-carousel flex items-center justify-center h-[400px] sm:h-[400px] overflow-hidden">

      <div
        className="flex transition-transform ease-in-out duration-500"
        style={{ transform: translateX(-${currentIndex * 100}%) }}
      >
        {Testimonials.map((testimonial) => (
          <div
            key={testimonial.id}
            className="testimonial bg-transparent text-white flex flex-col items-center justify-center mx-auto"
          >
            <p className="client-text">
              "{testimonial.text}"
            </p>
            <div className="client-info flex-col items-center text-2xl font-bold mt-12">
              <img
                src={testimonialImages[testimonial.id - 1]}
                alt="Client"
                className="w-16 h-16 mx-auto flex justify-center rounded-full"
              />
              <span className="mt-6 ml-2">{testimonial.client}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
    </>

  );
}