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
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
I am trying to have the same space (and configurable) before and after the divider line. However I cannot seem to get the spacing after the divider line.
<div class="grid grid-cols-1 divide-y divide-solid">
<div class="pb-5">Hello</div>
<div class="pb-5">World</div>
<div class="pb-5">hi</div>
</div>
It looks like this:
How can I get the same spacing before and after the divider line? Ideally without needing to touch the children styles (i.e. remove the pb-#)?
Try this code,
<div class="grid grid-cols-1 divide-y divide-solid bg-gray-500">
<div class="py-2 first:pt-0">Hello</div>
<div class="py-2">World</div>
<div class=" py-2 last:pb-0">hi</div>
</div>
credits: #brc-dd sample
I am using React with Tailwind CSS and want to conditionally render/reorder components.
Let say we want to show this order when mobile size
<div1 />
<div2 />
<div3 />
but desktop size
<div3 />
<div1 />
<div2 />
In tailwind css we can specify screen size border like sm (minWidth:375px), md (minWidth:415px), lg (minWidth:1200px) then apply css styling but how can we use this screen size for React component itself rendering condition?
I think checking this documentation for the order of the items could be helpful. You could try doing something like:
<div className="flex flex-col">
<div className="lg:order-last">01</div>
<div>02</div>
<div>03</div>
</div>
Grid is pretty useful for creating more complex logic that is also easy to manage. Consider the following, which has 3 different orders defined:
<div class="grid grid-rows-3">
<div class="md:row-start-2">1</div>
<div class="lg:row-start-1">2</div>
<div class="md:row-start-1 lg:row-start-auto">3</div>
</div>
Use the tailwind's order class
<div class="flex justify-between">
<div class="h-40 w-60 bg-blue-600 text-center text-8xl">Div 1</div>
<div class="h-40 w-60 bg-blue-600 text-center text-8xl">Div 2</div>
<div class="h-40 w-60 bg-blue-600 text-center text-8xl lg:order-first">Div 3</div>
</div>
Output in small screen:
Output in large screen:
Code link : tailwind-play
I have a Bootstrap-card but there is a problem with its width. I'd like to that card will take a full with of the column which I set. Here is a piece of code that I use and screenshot which presents actual width and wanted (with blue background).
Do you know any nice solution to make my goal fixed? Please take into consideration the responsive view.
<div class="row">
<ng-container *ngFor="let event of events">
<div class="col-12 col-lg-6 d-flex mt-5">
<!-- Card -->
<div class="card shadow-light-lg lift lift-lg">
<a class="card-body my-auto">
<div class="d-flex justify-content-between align-content-center align-items-center py-3">
<!-- some content -->
<h3 class="mt-auto">
{{event.title}}
</h3>
<div class="mb-0 text-muted" id="card-description">
{{event.description}}
</div>
</div>
</a>
</div>
</div>
...
</ng-container>
</div>
The width is not being applied properly. Either give width of 100%. Secondly you are using display-flex. So like parent has flex then items be given respective width.
Kindly share your code on stackblitz so we can better assist you. It will be much easier to debug.
I'm faced two issues
col-6 center text what should we do in order change to center,need change to row?
when the size is small, how to set image and text always at bottom
<div class="container-fluid ">
<div class="col-md-6 ser-first-grid text-center">
<img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />
</div>
<div class="col-md-6 ser-first-grid text-center">
<h3>PRODUCT SOURCING</h3>
<p>We assist clients in sourcing suppliers to meet specific product requirements.</p>
</div>
</div>
<div class="container-fluid">
<div class="col-md-6 ser-first-grid text-center">
<h3>DESIGN DEVELOPMENT</h3>
<p>MALCORP possesses the capacity to design specific and specialized products to meet the most discerning of customer requirements.</p>
</div>
<div class="col-md-6 ser-first-grid text-center">
<img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />
</div>
</div>
Check this jsfiddle out link
Use bootstrap flex-order here for responsive ordering of columns.More info Bootstrap flex-order
Add this class order-md-1 on second column and order-md-2 on first column.
As for the centering part, a text-center class on column should've worked.
Also you must put your columns inside rows.