CSS Problems- Job tracker

[daboi96]

I’m currently building an application that tracks jobs and was wondering how to make this component more responsive to page resizing as the tab shrinks or grows. I experimented a lot with the use of relative and absolute positioning and fixed positioning but I don’t think I’m going at it right. I’m using a mac and react js + laravel combo. Heres a pic of what the component looks like in full screen mode: (as i shrink the page the items start to overlap)

REACT CODE

import React, { useState } from "react";
import "../../css/JobDisplay.css";
import { StarIcon, TrashIcon, PencilIcon } from "@heroicons/react/24/outline";

export default function JobDisplay() {
  const [isDynamicDivOpen, setIsDynamicDivOpen] = useState(false);

  const toggleDynamicDiv = () => {
    setIsDynamicDivOpen(!isDynamicDivOpen);
  };

  return (
    <div className="parentdiv" onClick={toggleDynamicDiv}>
      <div className="task">
        <button className="star">
          <StarIcon className="my-icon" />
        </button>
        <div className="jobtitle">Job title </div>
        <div className="Company"> - Company</div>
        <button className="link-button">Link</button>

        <div className="status-dropdown">
          <select className="status-select">
            <option value="interested">Interested</option>
            <option value="applied">Applied</option>
            <option value="interview">Interview</option>
            <option value="offer">Offer</option>
            <option value="rejected">Rejected</option>
          </select>
        </div>

        {isDynamicDivOpen && (
          <div className="dynamic-div">
            <span className="date-applied"> 8/16/2023 </span>
            <span className="date-applied-label"> Date Applied </span>
            <span className="last-followup"> 8/16/2023 </span>
            <span className="last-followup-label"> Last Follow Up </span>
            <button className="div-buttons">
              <TrashIcon className="my-trash" />
              <PencilIcon className="my-pencil" />
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

CSS CODE

.parentdiv {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 30px;
}
.task {
    border: 3px solid #000000;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    display: flex;
    height: 50px;
    width: 65%;
    font-family: "Courier New", Courier, monospace;
    font-size: larger;
    font-weight: bold;
    position: relative;
    align-items: center;
}

.star {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.my-icon {
    height: 50px;
    padding: 10px;
    width: 50px;
    color: black;
    transition: color 0.3s;
}

.star:hover .my-icon {
    color: red;
}

.status-dropdown {
    display: flex;
    align-items: center;
}

.status-select {
    position: absolute;
    right: 8%;
    padding: 5px 10px;
    border: 4px solid #ccc;
    border-radius: 5px;
    background-color: #6893ff;
    color: #ffffff;
    cursor: pointer;
    font-family: "Lucida Console", "Courier New", monospace;
    font-weight: bold;
}
.status-select:hover {
    background-color: #8f00ff;
}

.link-button {
    position: absolute;
    right: 2%;
    padding: 5px 10px;
    border: 4px solid #ccc;
    border-radius: 5px;
    background-color: #ff6969;
    color: #ffffff;
    cursor: pointer;
    font-family: "Lucida Console", "Courier New", monospace;
    font-weight: bolder;
}

.link-button:hover {
    background-color: #8f00ff;
}

.dynamic-div {
    border: 3px solid #000000;
    background-color: #ffffff;
    border-radius: 20px;
    top: 100%;
    right: 0%;
    padding: 10px;
    height: 200px;
    display: flex;
    width: 90%;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    position: absolute;
    align-items: center;
}

.date-applied {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #ffb800;
    padding: 5px;
}

.date-applied-label {
    position: absolute;
    top: 20px;
    left: 140px;
    padding: 5px;
}

.last-followup {
    position: absolute;
    top: 20px;
    left: 320px;
    padding: 5px;
    background-color: #bbff9a;
}

.last-followup-label {
    position: absolute;
    top: 20px;
    left: 440px;
    padding: 5px;
}

.div-buttons {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.my-trash {
    position: absolute;
    right: 4%;
    top: 5%;
    height: 25px;
    padding: 10px;
    width: 50px;
    color: black;
    transition: color 0.3s;
}

.my-trash:hover {
    color: red;
}

.my-pencil {
    position: absolute;
    right: 0%;
    top: 5%;
    height: 25px;
    padding: 10px;
    width: 50px;
    color: black;
    transition: color 0.3s;
}

.my-pencil:hover {
    color: red;
}

[Teller]

Welcome to the forum @daboi96

You could setup media queries for various screen sizes, then define suitable styling property sizes for each break point. Start with the smallest, then work your way up.

Most screen pixel sizes are: 480, 768, 1024, or 1280
This will depend if you are developing for a mixture of mobile, tablet, laptop, desktop. Feel free to use as many or as few as you deem necessary.

Also, use flexible units such as percentage, rem, em vh and vw.

Best of luck with your project.

[lasjorg]

Positioning is rarely the correct choice there are usually better ways to do it. Flexbox, gap, padding/margin should get you very far in most cases.

If you do use positioning, the absolutely positioned child elements should be positioned inside a relatively positioned parent container and the offsets should (for the most) be in relative units (%).

---

I suggest you create an example on something like Codepen and post it.