Frontend- Tailwind - Mobile to Desktop design Need help implementing.
Unanswered
Red-footed Booby posted this in #help-forum
Red-footed BoobyOP
As shown in the images I want to go from my mobile design to the desktop design. The trouble i have is getting the image below the "Hi There- " and slight offset next to "I'm joshua" and then the small description next to the image and under "I'm joshua". Trying to fix this with out messing with the mobile design
import React from "react";
import Image from "next/image";
function Hero() {
return (
<section className="bg-noiseonwhite grid grid-cols-1 px-7 pb-10">
<header className="title md:text-lgTitle">
HI THERE -
<br />
<span className="title pb-6 flex justify-end md:text-lgTitle">I’M JOSHUA LIM</span>
</header>
<article className="content pb-5 text-gray md:text-lgContent">
An experienced Full-Stack Web Developer proficient in all areas of web development,
including frontend, backend, and database management.
</article>
<figure className="">
<Image
alt="Portrait of Joshua Lim"
src="/me.svg"
width={408}
height={488}
className="rounded-md mx-auto md:mx-0"
priority
/>
</figure>
<div className="mt-2 flex justify-between items-center content3 text-gray md:text-lgContent3">
<div className="flex items-center">
<Image
src="/icons/globe.svg"
alt="Location: Brooklyn, New York"
width={14}
height={14}
className="md:w-[24px] md:h-[24px]"
/>
<span className="pl-1">Brooklyn, New York</span>
</div>
<div className="hidden md:flex items-center">
<button className="flex items-center">
<span className="pr-1">(Scroll For More)</span>
<Image
src="/icons/arrowdown.svg"
alt="Arrow Down Icon"
width={24}
height={24}
className="animate-bounce"
/>
</button>
</div>
</div>
</section>
);
}
export default Hero;
6 Replies
Cursinu
is the desktop picture how you want it to look or how it already looks but you don't want it that way? do you have a github repo for this?
Red-footed BoobyOP
the desktop picture is how i want it and here is the repo https://github.com/FullStackJoshua/joshua-web
Cursinu
i'll take a look at it now, give me a minute
Cursinu
Wouldn't let me paste the code here so i made an issue in your repo with the code:
https://github.com/FullStackJoshua/joshua-web/issues/1
https://github.com/FullStackJoshua/joshua-web/issues/1
Hope that helps
Red-footed BoobyOP
Thank you so much! What a better approach to do it this way. I will implement this style through out my portfolio.