I am using react-full-page in my project. But while adding the Footer in the routes, the footer on visible in the second section of the page and is not going at the bottom of the page.
CodeSandbox
I have included 2 routes, one "/"for home and the other "/about" for about.
Your Footer component is after your fullPage element (you can see in inspect), but your fullPage element has a static height and your footer is after that, if you want your footer being after all element, in this case, you must add your footer into fullPage,
Like this,
function Home() {
return (
<>
<FullPage>
<Slide>
<div style={{ height: "100vh" }}>
<h1>Hi</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>Test Me</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>I am Home</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>I am Home</h1>
</div>
</Slide>
<Slide>
<Footer />
</Slide>
</FullPage>
</>
);
}
Related
I want to put a contain around my page so that on very large screens the content stays in the middle of the screen.
But I have a background image i want to still show over the container. Does anyone know how I would achieve this?
export const PreviewScreen: React.FC = () => {
return (
<div className="sm:ml-0 xl:container xl:mx-auto">
<div className="text-mainText font-Montserrat">
<PreviewPageNav />
<div className="ml-2">
<div className="ml-36 h-14">
<div className="bg-landing-background bg-no-repeat bg-14 bg-center-2 h-14 bg-center-2">
<p className="text-5xl font-Montserrat">
One workspace <br /> Every team
</p>
</div>
</div>
{/* <PackageCards /> */}
{/* <StoreContact /> */}
</div>
</div>
</div>
);
};
I want the image to go to the edge of the screen and not get cut off.
The <div> that has the container will need a parent <div> that is full width and has the image in it.
Here is an example
<div class="grid bg-center bg-[url('https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2560&h=2560&q=80')] bg-cover">
<div>
<div class="container m-5 mx-auto bg-slate-200 p-1 h-96">Hello World</div>
</div>
</div>
https://play.tailwindcss.com/Rgrs0CG87b
How to show right side first on mobil? I know in flexbox I could set flex-direction: column-reverse;. What about in Bootstrap?
const PostUC = (props: PostUCProps) => {
return (
<>
<section className="section-base">
<div className="container">
<div
className="row"
style={{
display: 'flex',
alignItems: 'center',
}}
>
<div className="col-lg-6 col-md-12">
</div>
<div
className="col-lg-6 col-md-12 fade-right"
style={{
aspectRatio: '525/480',
position: 'relative',
height: '100%',
display: 'block',
}}
>
</div>
</div>
</div>
</section>
</>
)
}
I tried based on this: https://www.w3schools.com/bootstrap4/bootstrap_flex.asp
flex-column-reverse, but it does not help.
return (
<>
<section className="section-base">
<div className="container">
<div
className="row flex-column-reverse"
I am trying to display list images that have a fixed width and use the original height of the image that is 100%.
Similar question here with no answer.
I have read these answers here and tried them out. The images are there in the dom but out of the screen and does not show up.
The size of images varies eg. 1280x15141, 1280x14333.
This is what I am trying to do from the docs example.
<main className="mx-auto max-w-7xl ">
<section className="flex flex-col">
{chapter.images.map((img) => (
<div key={img} style={{ position: 'relative', width: '768px', height: '100%' }}>
<Image alt="Mountains" src={img} layout="fill" objectFit="contain" />
</div>
))}
</section>
</main>
This ends up displaying no image but they are present in the dom.
Update:
As per suggestion I have added height.
<section className="flex flex-col">
{chapter.images.map((img) => (
<div key={img} style={{ position: 'relative', width: '768px', height: '100px' }}>
<Image alt="Mountains" src={img} layout="fill" objectFit="contain" />
</div>
))}
</section>
Plain img tag approach.
But if i use the images in <img> instead.
I am able to see the image and apply width to it with the height as the default.
<section className="flex flex-col gap-2">
{chapter.images.map((img) => (
<div key={img} className="mx-auto md:w-4/5">
<img alt="Mountains" src={img} />
</div>
))}
</section>
But I want to use NextJs Image.
How can I do that?
I believe you're import path is incorrect
import mountains from '../../public/mountains.jpg'
<div className="row align-items-center justify-content-center">
<div className="col-md-3 mt-3">
<div className="card bg-light">
<div className="card-img-top">
<Image
src="/character1.png"
alt="Picture of the author"
layout="fill"
/>
</div>
<div className="card-body">
<h5 className="card-title">Emirhan Sirkeci</h5>
<p className="text-muted">Developer</p>
<div className="d-flex justify-content-center">
<a href="https://github.com/justChargin" target="_blank">
<Icon icon="akar-icons:github-fill" />
</a>
<a href="https://www.instagram.com/username/" target="_blank">
<Icon icon="akar-icons:instagram-fill" />
</a>
<a href="mailto:emirhansirkeci8#gmail.com" target="_blank">
<Icon icon="cib:gmail" />
</a>
</div>
</div>
</div>
</div>
I replaced normal html element with next/image component. But im facing with responsive issues. Check out the screenshot below.
As you can see, Image component is top of the card-body. How can i place my Image component like others? When i give Image component fixed width and height properties, its stop being responsive. I also tried giving it width height properties that include "100%" value
next/image is rendered inside a span with absolute position. That's why it is overflowing the card-body.
You can fix it by adding some CSS to the card-img-top like the following example:
.card-img-top {
position: relative;
height: 200px;
}
Or you can override some CSS properties for the rendered next/image HTML elements:
.card-img-top span,
.card-img-top span img {
position: static !important;
}
.card-img-top span img {
height: auto !important;
}
Stackblitz example
I'm trying to create a sticky header with TailwindCSS but can't seem to make it work.
I've read the docs and seems that i only need to add sticky top-0 to my div to make it sticky, but it doesn't work.
I've tried to clean up my code as best as I could for the sake of readability, but if you are intrested in the entire code you can find it here.
import { Logo, ToolbarButton, IconLink, Countdown } from "#lib/atoms";
import { faWhatsapp, faFacebook } from "#fortawesome/free-brands-svg-icons";
import {
faHandHoldingHeart,
faHeadphonesAlt,
} from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
export const Toolbar = () => {
return (
<div className="flex flex-col drop-shadow-2xl">
<div className="h-16 flex items-center justify-center bg-rs-secondary">
<div className="container flex justify-between">
<div className="flex gap-4 items-center">
<IconLink
icon={faFacebook}
href="https://www.facebook.com/estereo.sulamita"
/>
<IconLink icon={faWhatsapp} href="https://wa.link/logvtp" />
</div>
<Countdown />
</div>
</div>
{/* I want this div to be sticky */}
<div className="sticky top-0 h-20 flex justify-center bg-white">
<div className="container flex items-center h-full justify-between">
<Logo />
<div className="flex">
<ToolbarButton>Inicio</ToolbarButton>
<ToolbarButton>Videos</ToolbarButton>
<ToolbarButton>Colaboradores</ToolbarButton>
<ToolbarButton
className="group"
hoverBackgroundColor="hover:bg-black"
primary={true}
>
<FontAwesomeIcon
icon={faHandHoldingHeart}
className="group-hover:text-white w-4"
/>
</ToolbarButton>
<ToolbarButton
backgroundColor="bg-rs-primary"
hoverBackgroundColor="hover:bg-black"
textColor="text-white"
primary={true}
>
Reproducir
<FontAwesomeIcon icon={faHeadphonesAlt} className="w-4 ml-3" />
</ToolbarButton>
</div>
</div>
</div>
</div>
);
};
The above code renders the following component:
Also, you can find a deployed version of my app here.
I'd like to achieve something like this with my header component.
Any help is much appreciated.
sticky element should be direct child of the scrollable element.
In your case scrollable element is the root __next container. Basically it means that you need to remove this div <div className="flex flex-col drop-shadow-2xl"> and replace it with React.Fragment so both of your headers, Countdown and second Header, would be direct children of this scrollable div.