I develop on windows using nextjs, but when I view my websites from a mac they always appear much smaller in font size, padding, margin, everything.
An example that's online is cspros
With screenshots, this is another one viewed on windows in chrome
and this is on a mac using chrome and it's also the same size on a chromebook
The CSS that controls my sizing is
.responsive {
#apply max-w-6xl mx-auto
}
And is the github of that project
with the code of my homepage below
<div className="min-h-screen w-full bg-[#FFFAEC]">
<Head>
<title>Computer Science Professionals</title>
<link rel="icon" href="/favicon.ico" />
</Head>
{/* navbar */}
<Header home active="/" />
{/* Hero and CTA button */}
<main className="responsive flex space-x-20 pt-40">
<div className="">
{/* Comment */}
<div className="flex items-center space-x-2 text-[0.7rem] text-accent-default">
<CheckCircleIcon className="h-5 w-5" />
<p>"This site is how I got a 9" - Harry Russin</p>
</div>
{/* Slogan and smaller text*/}
<div className="">
<h1 className="my-5 text-4xl font-bold">
The <span className="text-[#3F51DC] hover:text-purple-400">best</span> resources and
<br /> activities just for you.
</h1>
<h3 className="text-lg leading-6 text-gray-600">
Make learning enjoyable again with coding
<br /> exercises, interactive flashcards, whole
<br /> class games and much more!
</h3>
</div>
{/* buttons */}
<div className="z-20 mt-12 flex items-center space-x-5 text-xs">
<Link href={'/login'}><button className="heroButton py-4 px-5">Start your Journey</button></Link>
<div className="flex items-center space-x-3">
<Link replace href={'https://csnewbs.com'}>
<ChevronDoubleRightIcon className="heroButton box-content h-4 w-4 rounded-full py-4 px-4" />
</Link>
<p className="font-semibold text-[#3734A9]">
See our partner website - CSNewbs.com
</p>
</div>
</div>
</div>
<div className="z-10 mt-12 -rotate-[14deg]">
<img src="/questoblue.png" alt="blue questo" className="scale-125" />
{/* header image */}
</div>
</main>
</div>
This is probably really simple but I can't figure out it is so any help is appreciated
Related
What I have right now:
<div className="navbar">
<div className="navbar-content px-5">
<span>
<ArrowCircleLeftIcon
className="h-6 w-6 cursor-pointer dark:stroke-white"
onClick={() => setIsInfoModalOpen(true)}
/>
<InformationCircleIcon
className="h-6 w-6 mr-2 cursor-pointer dark:stroke-white"
onClick={() => setIsInfoModalOpen(true)}
/>
</span>
<p className="text-xl ml-2.5 font-bold dark:text-white">{GAME_TITLE}</p>
<div className="right-icons">
<ChartBarIcon
className="h-6 w-6 mr-3 cursor-pointer dark:stroke-white"
onClick={() => setIsStatsModalOpen(true)}
/>
<CogIcon
className="h-6 w-6 cursor-pointer dark:stroke-white"
onClick={() => setIsSettingsModalOpen(true)}
/>
</div>
</div>
<hr></hr>
</div>
What this shows:
I want the 2 icons on the left hand side to be next to each other instead of ontop of each other.
How should I go about doing this?
Create a class with a display:inline; and add it to the icons, once you preview you can play with adding padding/margin left or right if you need to adjust somethings, even line height; but display:inline; is what tells elements to not be side by side or on top of one another but next to each other. Make sure you test mobile view vs. larger displays as well.
Just had to add:
.left-icons {
display: flex;
}
I'm working on this website that is built on React Js and Tailwind. I've made it completely responsive and everything is in working condition however, sometimes when i try to open it in responsive mode on my browser it shows up zoomed in. If i try to exit and enter responsive mode one or two times, it works as intended with no space to move right or left on the webpage. When opening the website on mobile phone however, it shows up zoomed in. It's been two days and i cant get it to work. Phone Display. This is how the site looks like when it's working after entering and exiting responsive mode a couple times. Responsive on Browser. This is how the browser looks like when i try to run it in responsive mode when the bug appears Bad Browser Display
const ComponentCaller = () => { return (
<div className="flex md:min-w-full sm:max-w-screen">
//min-w-[80px] is to create an empty div to leave space for the sidebar
<div className="min-w-[80px] bg-transparent"></div>
<div>
{/*
<div className="bg-one bg-opacity-80 w-screen h-screen -z-50"> */}
<FrontComponent /> {/*
<TestComponent /> */}
<HustleComponent />
<HoverTableComponent />
<AboutUsComponent />
<Contact />
<Footer />
</div>
</div>
) }
This displays all the components
const FrontComponent = () => { return (
<>
<div className="font-body font-extrabold">
<div className="h-full w-full flex flex-col md:flex-row text-lite">
//80 vh height fixed
<div className="flex flex-col justify-center items-center h-[80vh] md:pr-0 sm:pr-6">
<h1 className="font-head text-8xl mr-2 md:pl-12 text-lite leading-tight">
Sample Text
</h1>
<br />
<div className="uppercase text-lite flex flex-col md:flex-row text-lg mt-8 w-max">
<button className="style-1 mt-4 ss:mt-6 rounded-tr-2xl md:mx-4 inline-flex text-base justify-center align-middle w-72 md:w-36 lg:w-48 lg:h-16 h-12">
Get a Quote
<svg
className="fill-lite w-[15px] mx-2 animate-pulse"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z" />
</svg>
</button>
<button className="style-1 mt-4 md:mx-4 rounded-tr-2xl inline-flex text-base justify-center align-middle w-72 md:w-36 lg:w-48 lg:h-16 h-12">
Join our Team
</button>
</div>
</div>
<div className="w-[42rem] md:mr-4 ml-16 lg:max-w-[45%] md:w-3/5 md:py-8 my-12 text-center relative grid justify-items-center items-center">
<img src={business} alt='business' />
</div>
</div>
</div>
</> ) }
the link is not working <Link href={/blog/detail?id=${blog._id}}.
{ data && data.map((blog) => (
<div className="col-12 col-lg-3 mb-6 mb-lg-0" key={blog._id}>
{/* Blog Card */}
<div className="card border-0 bg-transparent">
{/* <div className="position-absolute bg-white shadow-primary text-center p-2 rounded ml-3 mt-3">15
<br/>July
</div> */}
{/*<img className="card-img-top shadow rounded" src={`${blog.productImages[0]}`} alt="Image"/>*/}
<Link href={`/blog/detail?id=${blog._id}`}><img className="card-img-top shadow rounded_img" style={{height: "170px", width: "253px"}} src={BASE_URL+blog.productImages[0]} alt="Img"/></Link>
In HTML Links use the <a> element not link, try replacing your last line with:
<a href={`/blog/detail?id=${blog._id}`}><img className="card-img-top shadow rounded_img" style={{height: "170px", width: "253px"}} src={BASE_URL+blog.productImages[0]} alt="Img"/></a>
See here:
https://www.w3schools.com/tags/tag_a.asp
Also, try replacing className with class throughout your code.
On my react project i want align my components to vertical. But when i use div and make it flex , my component width is changing and looking bad. what should i do ? I using tailwindcss but if you dont know it you can tell normal css too. I can use normal css too. My component :
<div className="">
<div className="mt-6 ml-5 bg-gray-50 border rounded-lg border-gray-200 shadow-md w-3/12 h-full mb-10">
<div className="flex mt-2">
<div className="border border-gray-500 ml-2 mt-2 pl-1 pr-1 pt-2 ">
<FontAwesomeIcon icon={faEtsy} className="text-2xl text-red-600" />
</div>
<div className="relative">
<span className="ml-3 pt-2 relative text-xl font-medium">
{prop.PharmacyName}
</span>
<br />
<span className="ml-4 text-blue-800">{prop.PharmacyNumber}</span>
</div>
</div>
<Divider />
<div className="">
<p className="px-2 py-1 font-medium text-base text-gray-700">
{prop.PharmacyAdress}
</p>
</div>
</div>
</div>
How i calling my component :
data.map((x, index) => {
return (
<div className="flex align-center">
<PharmacyCard className="relative" key={index} props={x} />
</div> )})
How its looks like : https://prnt.sc/1covi9m
How i want : https://prnt.sc/1cow1sq
I using that component like 30-40 times with mapping. So i want to see like 3 component in a row. Thanks for all replies!
So i want to see like 3 component in a row.
Since you have clear idea about the layout, I suggest to wrap you components in another div with grid and three columns; something like this:
<div className="grid grid-cols-3">
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}
</div>
Depending on your design, you may add gap class as well.
Also consider removing w-3/12 class from components so they fill grid's width.
You just need to put the .flex in upper level like the below:
<div className='flex align-center'>
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}</div>
hope this link will assist you to get the flexbox better
https://codepen.io/enxaneta/full/adLPwv
I build a layout for a series of team portraits using React and Tailwind:
{/* Portrait list */}
<div className="max-w-sm mx-auto md:max-w-none">
{/* Portrait container */}
<div className="grid gap-12 md:grid-cols-3 md:gap-x-6 md:gap-y-8 items-start">
{/* 1st Portrait */}
<article className="flex flex-col h-full" data-aos="fade-up">
<header>
<Link to="/blog-post" className="block mb-6">
<figure className="relative h-0 pb-9/16 rounded-sm">
<img className="absolute inset-0 w-full h-full object-cover transform hover:scale-105 transition duration-700 ease-out" src={require('../images/john_doe.png').default} width="416" height="582" alt="News 01" />
</figure>
</Link>
<h3 className="h4 mb-2">
<Link to="/blog-post" className="hover:text-gray-100 transition duration-150 ease-in-out">John Doe</Link>
</h3>
</header>
<p className="text-lg text-gray-400 flex-grow">Head of Operations </p>
</article>
*/}
{/* 2nd portrait */} ...
The layout turns out exactly as intended:
After switching the hardcoded elements into a single data-driven component called 'TeamTile' , the layout is no longer applied. While the data is passed correctly into the component and every piece of information is present, all portraits are now shown below each other on every device: Why is this?
{/* Portrait list */}
<div className="max-w-sm mx-auto md:max-w-none">
{/* Portrait container */}
<div className="grid gap-12 md:grid-cols-3 md:gap-x-6 md:gap-y-8 items-start">
<TeamTile />
</div>
</div>
The element is constructed as follows, replicating the hard coded setup
using <article className="flex-col flex h-full" data-aos="fade-up"> exactly as before to apply the layout:
function TeamTile() {
return (
<div>
{TeamData.map((item, index) => {
return (
<article className="flex-col flex h-full" data-aos="fade-up">
<header>
<Link to={item.link} className="block mb-6">
<figure className=" rounded-sm">
<ProgressiveImage
delay={1000}
src={item.portrait}
placeholder={item.placeholder}
>
{(src, loading) => (
<img
className="inset-0 object-cover transform hover:scale-105 transition duration-700 ease-out"
style={{ opacity: loading ? 0.5 : 1 }}
src={item.portrait}
alt={item.alt}
/>
)}
</ProgressiveImage>
</figure>
</Link>
</header>
<div>
<h3 className="h4 mb-2">{item.name}</h3>
<p className="text-lg text-gray-500 flex-grow">{item.title}</p>
</div>
</article>
);
})}
</div>
);
}
export default TeamTile;
Where is my mistake?
because you wrapped your article tag with div you must remove div tag.
function TeamTile() {
return (
<>
{TeamData.map((item, index) => {
return (
<article className="flex-col flex h-full" data-aos="fade-up">
<header>
<Link to={item.link} className="block mb-6">
<figure className=" rounded-sm">
<ProgressiveImage
delay={1000}
src={item.portrait}
placeholder={item.placeholder}
>
{(src, loading) => (
<img
className="inset-0 object-cover transform hover:scale-105 transition duration-700 ease-out"
style={{ opacity: loading ? 0.5 : 1 }}
src={item.portrait}
alt={item.alt}
/>
)}
</ProgressiveImage>
</figure>
</Link>
</header>
<div>
<h3 className="h4 mb-2">{item.name}</h3>
<p className="text-lg text-gray-500 flex-grow">{item.title}</p>
</div>
</article>
);
})}
</>
);
}