I'm trying to implement responsiveness to this screen but I'm having trouble keeping things in place. When I'm in desktop mode, the laptop image stays where it should be, in the center of the lines, on top of the square. But I just shrink the screen, and the image of the lines meets the edge of the screen and shrinks out of sync with the laptop image. Is there any way I can synchronize this downsizing?
This is my page:
import type { NextPage } from 'next'
import Navbar from '../components/Navbar'
import logo from '../assets/logomarca-branco.png'
import wave from '../assets/svg/wave.svg'
import Lines from '../components/Lines'
import Computer from '../components/Computer'
import AutoWrite from '../components/AutoWrite'
import MobileNavbar from '../components/MobileNavbar'
const Home: NextPage = () => {
console.log(wave);
return (
<div>
<section className='bg-[#352575] w-full h-screen relative'>
<Navbar logo={logo}>
<span>Home</span>
<span>Sobre</span>
<span>Serviços</span>
<span>Portifólio</span>
<span>Contato</span>
</Navbar>
<MobileNavbar logo={logo}></MobileNavbar>
<div style={{ height: 'calc(100% - 56px)' }} className="relative">
<div className='inline-block ml-16 mt-32'>
<AutoWrite></AutoWrite>
</div>
<Computer></Computer>
<Lines></Lines>
<img src={wave.src} alt="wave" className='absolute bottom-0' />
</div>
</section>
<section className='bg-[#F3F4F5] w-full h-screen relative'></section>
</div>
)
}
export default Home
This is the computer container:
import computer from '../assets/svg/computer.svg'
import computerFloor from '../assets/svg/computer-floor.svg'
export default function Computer() {
return (
<>
<img src={computer.src} alt="computer" className='absolute z-10 right-8 bottom-20' />
<img src={computerFloor.src} alt="computerFloor" className='absolute z-0 right-8 bottom-20 opacity-50' />
</>
)
}
This is the lines container:
import lineBright from '../assets/svg/lines-bright.svg'
import linesClean from '../assets/svg/lines-clean.svg'
export default function Lines() {
return (
<div className='w-min h-min'>
<img src={lineBright.src} alt="lineBright" className='absolute right-0 bottom-0 opacity-40' />
<img src={linesClean.src} alt="lineClean" className='absolute right-8 bottom-0 opacity-40' />
</div>
)
}
You can use background-position-x with the desired horizontal placement of the lines background.
For example:
.w-min img{
background-position-x: 25%;
}
...if the lines background would be a part of the CSS,
but in your case you'd need left (or right), like so:
.w-min{
left: 25%;
position: relative;
}
Related
I have read through multiple posts regarding the issue of the footer not staying at the bottom of the page and resolved it with relative min-h-[calc(100vh-95px)] in the main div and absolute inset-x-0 bottom-0 in the footer. However, it is now the case that the page, or more precisely the button for the form is overlapping with the footer.
As the page height decreases, the button overlaps the footer and the rest of the page elements are overlapped by the footer. As the page height increases, so does the space between the page and footer. I've tried to adjust the min-height but that doesn't seem to resolve the issue.
I have also tried to set mb-1 to the page, the z-index to 9999 for the footer and mt-1 to the footer but the issue hasn't resolved.
Edit
The z-index class set to 9999 keeps the footer at the bottom but changing the max-height:500px to static causes the footer to move upwards and overlap with the page.
Footer.jsx
import React from 'react';
import { CiTwitter } from 'react-icons/ci';
import { IoLogoInstagram } from 'react-icons/io';
const Footer = () => {
return (
<div className='relative min-h-[calc(100vh-95px)]'>
<footer className='bg-black text-white text-center w-full absolute inset-x-0 bottom-0 z-index'>
...
</footer>
</div>
)
}
export default Footer
Contact.jsx
import React from 'react'
import Stockpic15 from '../img/stockpic15.jpg'
const Contact = () => {
return (
<div className='mb-1'>
<div className='flex flex-col justify-center items-center space-y-5'>
...
</div>
</div>
)
}
export default Contact
Index.css
#tailwind base;
#layer base {
html {
#apply font-serif
}
}
#tailwind components;
#layer components {
.contact-input{
#apply border-b border-black text-center sm:px-2.5 mobile:px-10 tablet:px-28;
}
.z-index{
z-index: 9999;
}
}
#tailwind utilities;
Did you try to add a media query for the footer? Can you try to set a static position for a maximum height?
For example:
#media (max-height: 500px) {
footer {
position: static;
}
}
Or did you try to add the z-index class with a value of 9999 to the footer, to ensure that the footer is always in front of the other elements regardless of the device height.
All I needed to do was to change absolute to sticky and remove the min-height from the parent div.
Hope this helps someone else :)
import React from 'react';
import { CiTwitter } from 'react-icons/ci';
import { IoLogoInstagram } from 'react-icons/io';
const Footer = () => {
return (
<div className=''>
<footer className='bg-black text-white text-center w-full sticky inset-x-0 bottom-0 mt-5'>
....
</footer>
I'm using Tailwind to style a React component called "BlurImage" which displays an image by default and then on hover removes the image and displays a button at the bottom of the component and a text box at the top that has overflow-y-auto behavior to allow for scrolling if the text grows too long.
By default, the overflow responsibility is given to the body as discussed here and so I need to give the parent top-level div of BlurImage overflow as well. This causes both the text and the button to be scrollable. Is there a way to avoid having the button scroll?
This seems like it should be a common situation - I can imagine using this concept to write self-contained components that have a header/footer and some scrollable content as well. Unfortunately, I can't find much addressing this in the Tailwind docs or online.
I appreciate any suggestions! Here is the component code that I currently have:
import Image from 'next/image';
import cn from 'classnames';
import { useState } from 'react';
import { ImageInfo } from '../../types/images';
import Button from './button';
import { useRouter } from 'next/router';
type BlurImageProps = {
image: ImageInfo;
};
const BlurImage = ({ image }: BlurImageProps): JSX.Element => {
const [isLoading, setLoading] = useState(true);
return (
<div className="group shrink-0 h-40 w-40 relative aspect-w-1 aspect-h-1 overflow-hidden rounded-lg xl:aspect-w-7 xl:aspect-h-8 drop-shadow-xl bg-black">
<Image
alt=""
src={image.url}
width={512}
height={512}
className={cn(
'flex h-full duration-700 ease-in-out group-hover:opacity-20',
{
'scale-110 blur-2xl grayscale': isLoading,
'scale-100 blur-0 grayscale-0': !isLoading,
},
)}
onLoadingComplete={() => setLoading(false)}
/>
{!isLoading && (
<div className="absolute bottom-0 left-0 overflow-y-scroll items-center justify-center w-full h-full align-middle text-center px-2 opacity-0 duration-700 ease-in-out group-hover:opacity-100">
<a href={image.url}>
<p className="text-base text-white mb-2">
{image.prompt}
</p>
</a>
<Button
className="flex-shrink-0 px-2 py-2 text-sm font-bold text-white rounded bg-green-500"
type="button"
text="click me"
isSubmit={true}
onClick={() => console.log("clicked")}
/>
</div>
)}
</div>
);
};
export default BlurImage;
import React from 'react';
import { Link,Router } from 'react-router-dom';
const Navbar = () => {
return (
<div className='p-5 pb-0 flex flex-wrap sm:justify-between justify-center item-center border-b dark:border-gray-700 border-gray-200'>
<div className="w-screen flex justify-between items-center space-x-5">
<Link to="/">
<p className='text-2xl '>Not Google</p>
</Link>
</div>
</div>
)
}
export default Navbar
Your Navbar component should be a child (any nesting depth) of Router component. Please check where is your Router component (BrowserRouter, etc...)
I am using the next/Image component to set an image and add styling using tailwindcss, I got stuck at this point.
What I want?
I wanted to change the src of the image to be changed on the basics of screensize. Like if I am in sm screen size, then it should display IMG1 and after md screen size, it should display IMG2.
Also, I want to change the height and 'widthattributes of thenext/Image` component subjective to the different screensize.
How Can I do so?
Code
import React from "react";
import imgurl from "../public/dog.jpg";
import imgurl2 from "../public/Ash.jpg";
import Image from "next/image";
const Projects = () => {
return (
<>
<div className="min-h-full container">
<Image
height={400}
width={800}
className="object-contain rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg "
src={imgurl2}
alt=""
/>
</div>
</>
);
};
export default Projects;
I had solved the issue by this,
Putting the two images in a div wrapper and hiding them on the basis of screen size.
<div className="block sm:hidden">
<Image
height={350}
width={700}
className="object-cover rounded-t-lg "
src={imgurl2}
alt=""
/>
</div>
<div className="hidden sm:block">
<Image
width="500%"
height="1000%"
className="object-cover rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
src={imgurl3}
alt=""
/>
</div>
I'm trying to add a logo to a Header component in react, but it's not showing.
It's like it is transparent because if I justify items with flex and space between, it counts like an element. I don't know what I'm doing wrong.
import React from "react";
import "./Header.css";
const Header = () => {
return (
<div className="header">
<img src="../img/logo.png" alt="" />
<h1>ONE</h1>
<h1>TWO</h1>
</div>
);
};
export default Header;
import logo from '<PATH>';
return <img src={logo} alt="Logo" />;