Beyond^sight
Explore posts from serversKPCKevin Powell - Community
•Created by Beyond^sight on 7/6/2024 in #front-end
Paragraphs displayed partially in smaller screen
oh, does that align the words in the center ?? i toked it off and now letter spacing it s just fine
26 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/6/2024 in #front-end
Paragraphs displayed partially in smaller screen
in the media screens above ?
26 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/6/2024 in #front-end
Paragraphs displayed partially in smaller screen
did you know that letterspacing could solve the
non-equivalent space between words ? 🤔
26 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/6/2024 in #front-end
Paragraphs displayed partially in smaller screen
26 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/6/2024 in #front-end
Paragraphs displayed partially in smaller screen
26 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/6/2024 in #front-end
Paragraphs displayed partially in smaller screen
somehow discord doesn t allow me to send code this way without nitro
26 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/6/2024 in #front-end
Paragraphs displayed partially in smaller screen
26 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/6/2024 in #front-end
Paragraphs displayed partially in smaller screen
I m not sure i understand wym
26 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/6/2024 in #front-end
Paragraphs displayed partially in smaller screen
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; } }
.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 Beyond^sight 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:
</> ); }
<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></> ); }
26 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/6/2024 in #front-end
Paragraphs displayed partially in smaller screen
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.",
}
]
26 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/6/2024 in #front-end
Paragraphs displayed partially in smaller screen
it a react component I ll send the file here in a sec
26 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/3/2024 in #front-end
~~Solutions to fix sections moving on mobile view
I just fixed it this morining @Kevin , I m using chrom across all devices
25 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/3/2024 in #front-end
~~Solutions to fix sections moving on mobile view
the styles used for the the are placed in the pen above
25 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/3/2024 in #front-end
~~Solutions to fix sections moving on mobile view
in none of the responsive mode offered in browser the componnetes doesnt move on Y axe , i discovered this problem when I checked the app in my phone to see how it look
25 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/3/2024 in #front-end
~~Solutions to fix sections moving on mobile view
@Lamer of Sweden @Chris Bolson In the responsive mode of the browser the sections doesn t overlay , the problem exist in the actual mobile view in the phone
25 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/3/2024 in #front-end
~~Solutions to fix sections moving on mobile view
in the browser / pc / laptop / tablem the sections / components doesn t overlap , this happens when I open the app on the mobile / actual phone
25 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/3/2024 in #front-end
~~Solutions to fix sections moving on mobile view
I can add some context or specific height , but still that won t really help beacuse the problem is taht browser doesn t show this problem of sections moving on Y axe when scrolling happens only in the deployed version in the actual phone you can see this happening
25 replies
KPCKevin Powell - Community
•Created by Beyond^sight on 7/3/2024 in #front-end
~~Solutions to fix sections moving on mobile view
25 replies