How to make responsive 'legend' area for mobile view

Question

I'm building a portfolio website using HTML & CSS. I want to add my projects inside tags. But those legend tags arn't responsive for the screen resolution(for me, it's mobile view) and its' border and content overflows the visible area once it display.

I also asked from chatGPT but didn't work any solution it provided.

This is the code snippet which I tried to add

This is the code snippet which chatGPT provided me as the solution(but didn't work)

/* Add styles for legend and fieldset */
legend {
    font-weight: bold;
    font-size: 1.2em;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal; /* Ensure text wraps */
    word-wrap: break-word; /* Ensure long words break */
    overflow: hidden;
}

fieldset {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.project {
    padding: 10px;
    margin: 10px 0;
}

.project h4, .project p, .project ul {
    font-size: 1em;
    padding: 5px 0;
    margin: 5px 0;
}

.project ul {
    padding-left: 20px;
}

.project ul li {
    list-style-type: disc;
}

@media (max-width: 768px) {
    legend {
        font-size: 1em;
        padding: 5px;
    }

    fieldset {
        padding: 10px;
    }

    #projects {
        padding: 20px;
        margin: 20px;
        margin-bottom: 50px;
    }

    #projects h1 {
        font-size: 1.5em;
    }

    .project h4, .project p, .project ul {
        font-size: 0.9em;
    }
}

<section id="projects">
        <h1>Projects</h1>
        <div class="project">
            <fieldset>
            <legend><h2>tharinedirisinghe.github.io/portfolio/</h2></legend>
            <h4>Description:</h4>
            <p>Explore my personal portfolio website showcasing my skills, projects, and professional journey.</p>
            <h4>Technologies Used:</h4>
            <ul>
                <li>HTML, CSS, JavaScript</li>
                <li>Hosted on GitHub Pages</li>
            </ul>
            <h4>My Contribution:</h4>
            <p>As a full-stack developer, I created the entire website and am currently working on the backend.</p>
            </fieldset>
        </div>
        
        <!-- Add more projects as needed -->
    </section>

Screenshot of my problem which I'm facing right now enter image description here

Answer 1

Just force the legend to break with word-break: break-all

I would point out that a fieldset here is not appropriate as...

MDN

The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.

...and that's not what you are doing here.

/* Add styles for legend and fieldset */

legend {
  font-weight: bold;
  font-size: 1.2em;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  /* Ensure text wraps */
  word-wrap: break-word;
  word-break: break-all;/* add this */
  /* Ensure long words break */
  overflow: hidden;
}

fieldset {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.project {
  padding: 10px;
  margin: 10px 0;
}

.project h4,
.project p,
.project ul {
  font-size: 1em;
  padding: 5px 0;
  margin: 5px 0;
}

.project ul {
  padding-left: 20px;
}

.project ul li {
  list-style-type: disc;
}

@media (max-width: 768px) {
  legend {
    font-size: 1em;
    padding: 5px;
    word-break: break-all
  }
  fieldset {
    padding: 10px;
  }
  #projects {
    padding: 20px;
    margin: 20px;
    margin-bottom: 50px;
  }
  #projects h1 {
    font-size: 1.5em;
  }
  .project h4,
  .project p,
  .project ul {
    font-size: 0.9em;
  }
}

<section id="projects">
  <h1>Projects</h1>
  <div class="project">
    <fieldset>
      <legend>
        <h2>tharinedirisinghe.github.io/portfolio/</h2>
      </legend>
      <h4>Description:</h4>
      <p>Explore my personal portfolio website showcasing my skills, projects, and professional journey.</p>
      <h4>Technologies Used:</h4>
      <ul>
        <li>HTML, CSS, JavaScript</li>
        <li>Hosted on GitHub Pages</li>
      </ul>
      <h4>My Contribution:</h4>
      <p>As a full-stack developer, I created the entire website and am currently working on the backend.</p>
    </fieldset>
  </div>

  <!-- Add more projects as needed -->
</section>