Cronocide/starbase-81
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive layout

Browse Source
This commit is contained in:
Jordan Roher 2023-04-19 20:51:59 -07:00
parent 06edfa28d6
commit cadb0c2f14
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/services.tsx
View File

@ -9,7 +9,7 @@ interface IServicesProps {
export const Services: React.FunctionComponent<IServicesProps> = ({ services }) => {
return (
<ul className="grid grid-cols-5 gap-4 gap-y-8">
<ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 lg:gap-4 lg:gap-y-6">
{services.map((service, index) => (
<Service key={index} service={service} index={index} />
))}

4
src/pages/index.tsx
View File

@ -13,8 +13,8 @@ export const IndexPage: React.FunctionComponent<IProps> = ({ icon, title }) => {
const mySerices = userServices as IService[];
return (
<div className="min-h-screen flex flex-row">
<div className="min-h-screen border-0 border-solid border-r border-r-gray-300 p-4 max-w-xs">
<div className="min-h-screen flex flex-col xl:flex-row">
<div className="w-full xl:w-auto xl:max-w-xs xl:min-h-screen border-0 border-solid border-b xl:border-r xl:border-b-0 border-gray-300 p-4">
<Header title={title} icon={icon} />
</div>
<div className="min-h-screen p-4 flex-grow">