#Frontend- Tailwind - Mobile to Desktop design Need help implementing.

7 messages · Page 1 of 1 (latest)

tacit pasture
#

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;
image.png image.png image.png
opal hazelBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

narrow hemlock
#

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?

tacit pasture
narrow hemlock
#

i'll take a look at it now, give me a minute

narrow hemlock
#

Hope that helps