I'm busing tailwindcss for my css. So for this I defined the image inside the tailwind config. Then I applied a cover on it but the image doesn't scale when I change the size of the screen. I thought by adding max-w-full min-h-full would fixe the problem but nothing.
import React from 'react'
import { CountdownEvent } from './CountdownEvent'
import { CarouselSaf } from './CarouselSaf'
import { Navbar } from './Navbar'
export const Home = () => {
return (
<section className="h-screen">
<div className="bg-safthon bg-no-repeat bg-cover max-w-full min-h-full">
<Navbar />
<div className="flex h-screen items-center">
<CountdownEvent />
</div>
</div>
</section>
)
}
Try to keep it simple. Check this demo.
<div class="min-h-screen max-h-screen bg-cover bg-center bg-no-repeat"
style="background-image: url('https://i.ytimg.com/vi/odM92ap8_c0/maxresdefault.jpg')">
</div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 days ago.
This post was edited and submitted for review 7 days ago.
Improve this question
I have a problem with my portfolio website (Gatsby JS & Tailwind CSS framework)
the website: https://portfolio-revin.vercel.app/
github repo: https://github.com/revin212/portfolio-revin/
index.js code:
import * as React from "react"
import '/src/styles/tailwind.css'
import Layout from '/src/components/Layout.js'
import Hero from '/src/components/Hero.js'
import Skills from "../components/Skills"
import Projetcs from "../components/Projetcs"
import Contact from "../components/Contact"
import { Helmet } from "react-helmet"
import AOS from 'aos'
import 'aos/dist/aos.css'
import { useEffect } from "react"
export default function Home() {
useEffect(()=>{
AOS.init({
duration: 1700,
})
}, [])
return (
<Layout>
<Helmet>
<title>Revin's Portfolio</title>
</Helmet>
<main id="main-content" className=" text-neutral-white">
<div className='hero-section overflow-hidden bg-gradient-blue bg-cover bg-no-repeat
mt-[4.5rem] w-full'>
<Hero />
</div>
<div id='skills' className='skills-section overflow-hidden w-full bg-main-black px-[1.2rem] lg:px-[2rem] py-[4rem]'>
<Skills />
</div>
<div id='projects' className='projects-section overflow-hidden w-full bg-main-black px-[1.2rem] lg:px-[2rem] py-[4rem]'>
<Projetcs />
</div>
<div id='contact' className='contact-section overflow-hidden bg-gradient-blue bg-cover bg-no-repeat w-full px-[1.2rem] lg:px-[2rem] pt-[4rem] pb-[6rem]'>
<Contact />
</div>
</main>
</Layout>
)
}import * as React from "react"
import '/src/styles/tailwind.css'
import Layout from '/src/components/Layout.js'
import Hero from '/src/components/Hero.js'
import Skills from "../components/Skills"
import Projetcs from "../components/Projetcs"
import Contact from "../components/Contact"
import { Helmet } from "react-helmet"
import AOS from 'aos'
import 'aos/dist/aos.css'
import { useEffect } from "react"
export default function Home() {
useEffect(()=>{
AOS.init({
duration: 1700,
})
}, [])
return (
<Layout>
<Helmet>
<title>Revin's Portfolio</title>
</Helmet>
<main id="main-content" className=" text-neutral-white">
<div className='hero-section overflow-hidden bg-gradient-blue bg-cover bg-no-repeat
mt-[4.5rem] w-full'>
<Hero />
</div>
<div id='skills' className='skills-section overflow-hidden w-full bg-main-black px-[1.2rem] lg:px-[2rem] py-[4rem]'>
<Skills />
</div>
<div id='projects' className='projects-section overflow-hidden w-full bg-main-black px-[1.2rem] lg:px-[2rem] py-[4rem]'>
<Projetcs />
</div>
<div id='contact' className='contact-section overflow-hidden bg-gradient-blue bg-cover bg-no-repeat w-full px-[1.2rem] lg:px-[2rem] pt-[4rem] pb-[6rem]'>
<Contact />
</div>
</main>
</Layout>
)
}
When I open it on desktop browsers, it works fine and smooth, but on mobile devices, it's really laggy and I don't know what is the problem. I've tried removing the 'animation on scroll', and adding lazy loader to all images. But the lag is still there on mobile devices.
The animation on scroll library that I used for this website is 'aos':
https://www.npmjs.com/package/aos
From the vercel analytics feature, I found that the "cumulative layout shift" is the one that performs poorly, here is the analytics :
vercel website performance analysis image
Do you have any idea how can I improve the cumulative layout shift on mobile devices?
What I've tried:
removing the 'animation on scroll'
adding lazy loader to all images
compressing the png images
I am trying to make a smooth transition to my second panel of the page by making anchor, as I read on the internet the proper way to do this is by using react.scroll but after doing everything like on the internet my tag simply don't work, while inspecting it with the browser it shows and tag with no destination to go to.
my app comopnent is site in this project:
`
import React, {Component} from 'react';
import Firstpanel from "./firstpanel";
import Secondpanel from "./secondpanel";
import Thirdpanel from "./thirdpanel";
class Site extends Component {
render() {
return (
<div className={"h-screen snap-y snap-mandatory overflow-x-hidden"}>
<div className={"snap-start bg-[url('../public/images/banner_cropped.png')] bg-dark-grey bg-blend-multiply bg-[length:100vw_100vh] h-screen w-screen "}>
<Firstpanel></Firstpanel>
<Secondpanel></Secondpanel>
<Thirdpanel></Thirdpanel>
</div>
</div>
);
}
}
export default Site;
`
then my first panel:
`
import React, {Component} from 'react';
import {Link} from "react-scroll";
class Firstpanel extends Component {
render() {
return (
<section className={" w-screen h-screen flex justify-center items-center flex-col gap-20"}>
<h1 className={"font-bold text-8xl text-beige select-none"}>Welcome to the coding world!</h1>
<p className={"font-bold text-4xl text-beige select-none"}>This site is going to be my personal portfolio for future projects</p>
<Link className={"w-16 h-16 rounded-full mt-12 animate-bounce"} to="sec" spy={true} smooth={true}>
<div className={"rounded-full w-16 h-16 bg-[url('../public/images/second_white_arrow_down.png')] bg-cover cursor-pointer"} type="button">
</div></Link>
</section>
);
}
}
export default Firstpanel;
`
and my second panel:
`
import React, {Component} from 'react';
class Secondpanel extends Component {
render() {
return (
<section className={"snap-start bg-dark-grey h-screen w-screen"}>
<h1 id="home">Hi Paul</h1>
</section>
);
}
}
export default Secondpanel;
`
I tried play with the react.scroll, but even after that it alwyas did nothing
I am using the react-responsive-carousel library to have a carousel.
everything works fine, the problem occurs when I do a swipe up and swipe down the carousel moves (see the image):
I only need it to move when I do a swipe left or swipe right.
How can I avoid the swipe up and swipe down?
This is my live code:
https://codesandbox.io/s/crazy-nova-5hf06u
this is my code:
import "./styles.css";
import ReactDOM from "react-dom";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";
export default function App() {
return (
<Carousel
showThumbs={false}
showStatus={false}
showIndicators={false}
showArrows={false}
emulateTouch={true}
axis="horizontal"
>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
</Carousel>
);
}
You can use preventMovementUntilSwipeScrollTolerance prop with swipeScrollTolerance={100}.
I have created a one-page website using tailwindcss and React. In the prototype I use the tailwindcss class "scroll-smooth" and it works. In React the class "scroll-smooth" does not work, but what is the reason?
https://tailwindcss.com/docs/scroll-behavior#basic-usage
When I click "Why" on Navigation i jump to the section "why" but not smoothly:
function App() {
return (
<div className="App">
<div className="relative">
<div className="flex flex-col scroll-smooth">
<HomeNav />
<HomeHero />
<section id="why" className="flex flex-col items-center px-6 pt-20">
...
</section>
<HomeFooter />
</div>
</div>
</div>
);
}
Solution:
I think TailwindCss Class "scroll-smooth" it doesn't work on react. So I use the NPM package "react-scroll" with which it works great and I probably have less compatibility worries.
https://www.npmjs.com/package/react-scroll
react-scroll working superb but We can still use scroll-behavior: smooth with react and tailwindcss. Here is my solution:
Folder & File structure:
App.js :
import "./App.css";
import AntyHero from "./components/AntyHero";
import Footer from "./components/Footer";
import Hero from "./components/Hero";
import Navbar from "./components/Navbar";
function App() {
return (
<>
<section id="header">
<Navbar />
</section>
<div className="flex flex-col h-screen items-center justify-center additional gap-3">
<h1 className="text-5xl">TailwindCSS & React.js</h1>
<h2 className="text-3xl pb-5">smooth scrolling behavior</h2>
<div className="flex gap-5 items-center justify-center text-2xl underline bg-white rounded-md p-2">
<a href="#one" className="text-orange-600">
Section One
</a>
<a href="#two" className="text-red-600">
Section Two
</a>
<a href="#three" className="text-green-700">
Section Three
</a>
</div>
</div>
<div className="text-center text-3xl">
<section id="one" className="h-screen bg-orange-600">
Section One
</section>
<AntyHero />
<section id="two" className="h-screen bg-red-600">
Section Two
</section>
<Hero />
<section id="three" className="h-screen bg-green-700">
Section Three
</section>
</div>
<Footer />
</>
);
}
export default App;
index.css :
#tailwind base;
html {
scroll-behavior: smooth;
}
#tailwind components;
#tailwind utilities;
Output:
Tested with:"tailwindcss": "^3.0.11", "react": "^17.0.2" Firefox and Chrome
Add scroll-behavior: smooth to the code works for me.
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
html {
scroll-behavior: smooth;
}
}
I'm building a website by react and my local image doesn't display. I use props to pass the properties from Cards.js to CardItem.js then every properties display except image. I don't know what is a problem with my code :(
Here is Cards.js:
import React from 'react'
import CardItem from './CardItem'
import './Cards.css'
function Cards() {
return (
<div className="cards">
<h1>Check out these EPIC Destinations!</h1>
<div className="cards-container">
<div className="cards-wrapper">
<ul className="cards-items">
<CardItem
src='../assets/images/img-9.jpg'
text='Explore the hidden waterfall deep inside the Amazon Jungle'
label='Adventure'
path='/sevices'
/>
</ul>
</div>
</div>
</div>
)
}
export default Cards
CardItem.js:
import React from 'react'
import { Link } from 'react-router-dom'
function CardItem(props) {
return (
<>
<li className="cards-item">
<Link className="cards-item-link" to={props.path}>
<figure className="cards-item-pic-wrap" data-category={props.label}>
<img src={props.src} alt="Travel Img" className="cards-item-img" />
</figure>
<div className="cards-item-info">
<h5 className="cards-item-text">{props.text}</h5>
</div>
</Link>
</li>
</>
)
}
export default CardItem
we want to import the image first
import img from './assets/images/img-9.jpg';
We named image as img use it in your code.
import React from 'react'
import CardItem from './CardItem'
import './Cards.css'
import img from './assets/images/img-9.jpg';
function Cards() {
return (
<div className="cards">
<h1>Check out these EPIC Destinations!</h1>
<div className="cards-container">
<div className="cards-wrapper">
<ul className="cards-items">
<CardItem
src={img}
text='Explore the hidden waterfall deep inside the Amazon Jungle'
label='Adventure'
path='/sevices'
/>
</ul>
</div>
</div>
</div>
)
}
export default Cards
first import image
import img from '../assets/images/img-9.jpg'
then use it
<CardItem src={img} .../>
I hope this helps you, resources https://create-react-app.dev/docs/using-the-public-folder/:
for Cards.js file:
...
<CardItem
src='/images/img-9.jpg'
text='Explore the hidden waterfall deep inside the Amazon Jungle'
label='Adventure'
path='/services'
/>
And...
for CardItem.js file:
...
<img
className='cards__item__img'
alt='Travel'
src={process.env.PUBLIC_URL + props.src}
/>