Kevin Powell - Community•6mo ago

Paragraphs displayed partially in smaller screen

I m having this issue where the paraphs imported from a js file where they ve been stocked as array are not showing up entirely in @media screen , can somebody pls help me with this ?

18 Replies

lko•6mo ago

Code?

Beyond^sightOP•6mo ago

it a react component I ll send the file here in a sec data.js export const Testimonials = [ { id: 1, image: client1, client: 'Daniel Macler', text: "I couldn't be happier with the rental services provided by Estateland. They made the whole process so easy and stress-free. Their team was professional, responsive, and found me the perfect place to call home. I highly recommend their rental services to anyone in need of a great place to live.", }, { id: 2, image: client2, client: 'Maria Aston', text: "I found my dream home! The intuitive interface and advanced features made searching and purchasing a property a delightful experience. I highly recommend this app to anyone looking for the perfect place to call home!", }, { id: 3, image: client3, client: 'Austin Lincon', text: "The team at Estateland went above and beyond to help me sell my property. Their expertise and marketing strategies are top-notch. They managed to secure a great deal for me, and I couldn't be happier with the results. I would highly recommend Estateland for anyone looking to sell their property.", }, { id: 4, image: client4, client: 'Keisha Lorenzo', text: "Estateland's property listing and sales services are exceptional. They have a deep understanding of the real estate market and provided me with invaluable insights throughout the selling process. Thanks to their guidance, I was able to sell my property quickly and at a great price. I am grateful for their professionalism and dedication.", } ] 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>
</> ); } And here s the css : /* 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; } }

lko•6mo ago

can you format it with ```jsx \ code ```

Beyond^sightOP•6mo ago

I m not sure i understand wym

lko•6mo ago

Dont send your code like this Do it like this ```jsx const your = "code" ``` Which becomes

const your = "code"

const your = "code"

Beyond^sightOP•6mo ago

lko•6mo ago

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>
    </>

  );
}

/* 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;
  }


  }