KPC
Kevin Powell - Community•2mo ago
tejveer

Component position changing when opening developer portal

Hello, I've been trying to work on frontend mentors' exercises. In the one I'm currently doing, when I open my developer portal, the height and position of the component change. Here's my code: 
import { useState } from "react";

function App() {
  return (
    <>
      <div className="flex w-full h-screen">
        <div className="mx-auto my-auto text-white flex flex-col bg-gray-700 rounded-2xl p-8">
          <div className="flex flex-col items-center px-2">
            {/* Profile + Name + Location */}
            <div className="flex flex-col items-center mb-4 px-10">
              <div className="h-[75px] w-[75px] mb-4 rounded-[100%] bg-yellow-200"></div>
              <h1 className="text-2xl">Some Name</h1>
              <h2 className="text-xl">Location</h2>
            </div>
            {/* Interests */}
            <div className="mb-5">Interests will go here</div>
          </div>
          <div className="flex flex-col gap-4">
            <button className="px-[120px] py-[10px] bg-gray-600 rounded-md">
              Github
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Frontend Mentor
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Linkedin
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Twitter
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Instagram
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;
import { useState } from "react";

function App() {
  return (
    <>
      <div className="flex w-full h-screen">
        <div className="mx-auto my-auto text-white flex flex-col bg-gray-700 rounded-2xl p-8">
          <div className="flex flex-col items-center px-2">
            {/* Profile + Name + Location */}
            <div className="flex flex-col items-center mb-4 px-10">
              <div className="h-[75px] w-[75px] mb-4 rounded-[100%] bg-yellow-200"></div>
              <h1 className="text-2xl">Some Name</h1>
              <h2 className="text-xl">Location</h2>
            </div>
            {/* Interests */}
            <div className="mb-5">Interests will go here</div>
          </div>
          <div className="flex flex-col gap-4">
            <button className="px-[120px] py-[10px] bg-gray-600 rounded-md">
              Github
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Frontend Mentor
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Linkedin
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Twitter
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Instagram
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;
What could the issue be?
1 Reply
Anurag M
Anurag M•2mo ago
You are using h-screen which sets the height to entire viewport height. So when the devtools opens, visible height and width changes and your layout adjusts accordingly depending on the available space around it. You can fix it with min-h-screen what this will do is that it'll allow contents to grow beyond the screen, rather than forcing everything into the available space/window.

Did you find this page helpful?