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
Related
I'm trying to figure out how to center an image (svg) in tailwind css.
<Container>
<div className="mx-auto max-w-2xl md:text-center">
<p className="justify-center">
// I have tried using center-content, text-center but get the img left aligned. How can I force it into the center of the container?
<Image src={company.logo} alt={company.name} unoptimized />
</p>
<p className="mt-4 text-lg tracking-tight text-slate-700">
{company.name}
</p>
</div>
</Container>
I can get the text for company name centered, but the image is fixed in left alignment with every variation I tried.
Your justify-center wont work if you haven't included flex.By default it display of block
<Container>
<div class="mx-auto max-w-2xl md:text-center">
<p class="flex justify-center"> // 👈 specify flex here
<image src="https://www.bing.com/th?id=OIP.o7c7ftXCLdQDsfE9NkWCvwHaGb&w=268&h=232&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="{company.name}" unoptimized />
</p>
<p class="mt-4 text-4xl tracking-tight text-slate-700">Company Here</p>
</div>
</Container>
Output:
Tailwind-css playground link
I have let my user select an image preview in div, and then crop an area to upload an image.
Now I have a problem with how to show the image's actual size in a div with Tailwind-CSS.
For example, a.jpg size is 3000px X 2500px.
<body class="antialiased">
<div class="w-2/3 mx-auto">
<div class="relative overflow-auto">
<img src="/a.jpg" class="w-full" alt="">
</div>
</div>
</body>
The size of the image is reduced to fit inside the div, so overflow-auto didn't work.
I want to show both x and y scrollbars, can anyone help?
Thank you.
Apply h-max and w-max to the image's container. This way, your container will always scale according to the image's width and height.
Example:
<body class="antialiased">
<div class="h-max w-max">
<img src="https://s1.1zoom.me/big3/371/363095-commander06.jpg"/>
</div>
</body>
Tailwind-play
If you don't want to change your layout, you can create another separate container for the h-max and w-max utilities:
<body class="antialiased">
<div class="mx-auto w-2/3">
<div class="overflow-auto">
<div class="h-max w-max">
<img src="https://s1.1zoom.me/big3/371/363095-commander06.jpg" />
</div>
</div>
</div>
</body>
Tailwind-play
You can also limit the area by adding custom width and height to the middle container:
<body class="antialiased">
<div class="mx-auto w-2/3">
<div class="overflow-auto h-[300px] w-[500px]">
<div class="h-max w-max">
<img src="https://s1.1zoom.me/big3/371/363095-commander06.jpg" />
</div>
</div>
</div>
</body>
Tailwind-play
I fetch data from api in react and display screen with images but they don't look very good. I ' am not good at react. I am new react. Maybe duplicate question but I need help.
The component that I get the data from the API and show it
return (
<div className="row">
{Categories.map((category, i) => (
<div className="col-lg-4" key={i}>
<div className="card mb-4 shadow-sm">
<img src={category.categoryImage} className="card-img-top" alt="Card image cap" />
<div className="card-body">
<h5 className="card-title">{category.cotegoryName}</h5>
<p className="card-text">{truncateOverview(category.cotegoryDescription, 100)}</p>
<div className="d-flex justify-content-between align-items-center">
<h2><span className="badge badge-info">{category.categoryStatus}</span></h2>
</div>
</div>
</div>
</div>
))}
</div>
)
I want to leave some space from the sides so that the cards do not stick to the edges of the screen. As you can see, the cards look stuck in the picture. And I want to make it a little smaller, they're too big.I want them all the same size
what do i need to add css file for this or what should i do? what are your suggestions
I'm using tailwind css to arrange two <div> within a parent <div>.
What I want is to make the parent at the center of the screen, that's why I use "flex justify-center". I also want the two child <div> are ordered row by row, so I use "block". However, they're still shown in the same row.
Here is how it looks like:
<div className="flex justify-center">
<div className="block"> <!-- DIV 001 -- >
</div>
<div className="block"> <!-- DIV 002 -- >
</div>
</div>
What change should I make to make the two child DIV take up the whole width/row ?
You mean like that?
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex h-screen">
<div class="m-auto">
<div class="block"> <!-- DIV 001 -->
DIV 1
</div>
<div class="block"> <!-- DIV 002 -->
DIV 2
</div
</div>
</div>
Try something like this:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex justify-center w-full items-center min-h-screen">
<div>
<div>
div 1
</div>
<div>
div 2
</div>
</div>
</div>
I'm just getting started with tailwind and I would like to grid essentially a row of images that fit the container.
Currently I am just stubbing in 2 photos for testing/getting to know tailwind purposes.
<main class="mt-12 lg:mt-32">
<section class="container mx-auto px-6">
<div class="w-full lg:flex items-center">
<div *ngFor="let item of photos">
<p class="text-md lg:text-xl font-light text-gray-800 mb-8">
{{item.description}}
</p>
<div class="grid grid-col-2 gap-2">
<img [src]="image" *ngFor="let image of item.images"
class="object-contain shadow rounded border-none">
</div>
</div>
</div>
</section>
</main>
This code is causing the 2 images to essentially appear underneath each other as seen here
https://i.imgur.com/vhSBkc7.png
Thank you for any help.
Your class should me grid-cols-2 and the img tag should have col-span-1. Checkout Grid Columns
<div class="grid grid-cols-2 gap-2"> // grid-cols-2
<img [src]="image" *ngFor="let image of item.images" class="col-span-1 object-contain shadow rounded border-none"> // col-span-1
</div>