buttons do not display correctly after making screen smaller to check responsiveness – HTML/CSS-ThrowExceptions

Exception or error:

I have a couple of css questions I require help with.

1: I have split my menu of buttons using flex so that there’s 6 columns. When I look at the spacing of the buttons between each column, they don’t look even, how can I acheive that evenness?

enter image description here

2: When I make the screen smaller to check responsiveness, it seems a mess. The buttons overlap the header and I want all the columns of the buttons to be displayed one another. How can this be fixed?

enter image description here

Below is the HTML and CSS

      <!-- First slide -->
      <section id="slide=1">
     <header>Slides Selection Page</header>
     <div class="wrap"> 
       <div class="btn-container">      
        <div class="btn-group btn-group1">
        <a href="#">Introduction</a>
        <a href="#">Career Development - IT Support</a>
        <a href="#">Career Development - Testing</a>
      </div> 


      <div class="btn-group btn-group2">
          <a href="#">Lesson 1: Methodologies and Development Lifecycle</a>
          <a href="#">Lesson Breakdown</a>
          <a href="#">Methodologies</a>
          <a href="#">Waterfall SDLC</a>
          <a href="#">Agile SDLC</a>
          <a href="#">Scrum vs Kanban</a>
          <a href="#">Ceremonies</a>
          <a href="#">Methodologies and Development Lifecycle - Practice Questions</a>
      </div>

      <div class="btn-group btn-group3">
        <a href="#">Lesson 2: IT Support</a>
        <a href="#">Lesson Breakdown</a>
        <a href="#">Team Structure - IT Support</a>
        <a href="#">What is IT Support and Skills Required</a>
        <a href="#">Example Call Logs</a>
        <a href="#">IT Support - Practice Questions</a>
      </div> 

      <div class="btn-group btn-group4">
        <a href="#">Lesson 3: Testing Foundations</a>
        <a href="#">Lesson Breakdown</a>
        <a href="#">Development Team Structure</a>
        <a href="#">What is Testing?</a>
        <a href="#">Manual Testing vs Automation Testing</a>
        <a href="#">Levels of Testing</a>
        <a href="#">Types of Testing</a>
        <a href="#">Test Environments</a>
        <a href="#">Testing Foundations - Practice Questions</a>
      </div> 

      <div class="btn-group btn-group5">
        <a href="#">Lesson 4: Manual Testing Activities</a>
        <a href="#">Lesson Breakdown</a>
        <a href="#">Test Cases, Test Suites, Defect Reports and Test Reports</a>
        <a href="#">Example Test Case</a>
        <a href="#">Example Test Suite</a>
        <a href="#">Example Defect Report</a>
        <a href="#">Example Test Report</a>
        <a href="#">Example Test</a>
        <a href="#">Manual Testing Activities - Practice Questions</a>
      </div> 

      <div class="btn-group btn-group6">
        <a href="#">Lesson 5: Intro Into Automation</a>
        <a href="#">Lesson Breakdown</a>
        <a href="#">BDD and TDD</a>
        <a href="#">Gherkin Language - Given When Then</a>
        <a href="#">Structure Your Automation</a>
        <a href="#">Automation Walkthrough</a>
        <a href="#">Intro Into Automation - Practice Questions</a>
      </div> 
    </div>
     </div>

      </section>

---

 .btn-group a {
  border: 1px solid white; 
  color: white; 
  cursor: pointer; 
  text-align: center; 
  display: block; 
  font-size: medium;
  font-weight: bold;
  margin-bottom: 1em;
  overflow-wrap: normal;
  width: 95%;
  padding: 0.5em;
}
.btn-group1 a {
  background-color: red; 

}

.btn-group2 a {
  background-color: green; 
}

.btn-group3 a {
  background-color: red; 

}

.btn-group4 a {
  background-color: green; 
}

.btn-group5 a {
  background-color: red; 

}

.btn-group6 a {
  background-color: green; 
}

.btn-group a:not(:last-child) {
  border-bottom: none; 
}

.btn-group a:hover {
  background-color: #3e8e41;
}

.btn-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  position: relative;
}
How to solve:

You need to add width on btn-group and add flex-wrap: wrap in your container. Here is the updated css code. Please check this in full page view.

* {
  box-sizing: border-box;
}

.btn-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}

.btn-group {
  width: 16.66%;
  padding: 0 10px;
}

.btn-group a {
  border: 1px solid white;
  color: white;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  font-size: medium;
  font-weight: bold;
  margin-bottom: 1em;
  overflow-wrap: normal;
  width: 100%;
  padding: 0.5em;
}

.btn-group1 a {
  background-color: red;
}

.btn-group2 a {
  background-color: green;
}

.btn-group3 a {
  background-color: red;
}

.btn-group4 a {
  background-color: green;
}

.btn-group5 a {
  background-color: red;
}

.btn-group6 a {
  background-color: green;
}

.btn-group a:not(:last-child) {
  border-bottom: none;
}

.btn-group a:hover {
  background-color: #3e8e41;
}

@media (max-width: 767px) {
  .btn-group {
    width: 100%;
  }
}
<section id="slide=1">
  <header>Slides Selection Page</header>
  <div class="wrap">
    <div class="btn-container">
      <div class="btn-group btn-group1">
        <a href="#">Introduction</a>
        <a href="#">Career Development - IT Support</a>
        <a href="#">Career Development - Testing</a>
      </div>


      <div class="btn-group btn-group2">
        <a href="#">Lesson 1: Methodologies and Development Lifecycle</a>
        <a href="#">Lesson Breakdown</a>
        <a href="#">Methodologies</a>
        <a href="#">Waterfall SDLC</a>
        <a href="#">Agile SDLC</a>
        <a href="#">Scrum vs Kanban</a>
        <a href="#">Ceremonies</a>
        <a href="#">Methodologies and Development Lifecycle - Practice Questions</a>
      </div>

      <div class="btn-group btn-group3">
        <a href="#">Lesson 2: IT Support</a>
        <a href="#">Lesson Breakdown</a>
        <a href="#">Team Structure - IT Support</a>
        <a href="#">What is IT Support and Skills Required</a>
        <a href="#">Example Call Logs</a>
        <a href="#">IT Support - Practice Questions</a>
      </div>

      <div class="btn-group btn-group4">
        <a href="#">Lesson 3: Testing Foundations</a>
        <a href="#">Lesson Breakdown</a>
        <a href="#">Development Team Structure</a>
        <a href="#">What is Testing?</a>
        <a href="#">Manual Testing vs Automation Testing</a>
        <a href="#">Levels of Testing</a>
        <a href="#">Types of Testing</a>
        <a href="#">Test Environments</a>
        <a href="#">Testing Foundations - Practice Questions</a>
      </div>

      <div class="btn-group btn-group5">
        <a href="#">Lesson 4: Manual Testing Activities</a>
        <a href="#">Lesson Breakdown</a>
        <a href="#">Test Cases, Test Suites, Defect Reports and Test Reports</a>
        <a href="#">Example Test Case</a>
        <a href="#">Example Test Suite</a>
        <a href="#">Example Defect Report</a>
        <a href="#">Example Test Report</a>
        <a href="#">Example Test</a>
        <a href="#">Manual Testing Activities - Practice Questions</a>
      </div>

      <div class="btn-group btn-group6">
        <a href="#">Lesson 5: Intro Into Automation</a>
        <a href="#">Lesson Breakdown</a>
        <a href="#">BDD and TDD</a>
        <a href="#">Gherkin Language - Given When Then</a>
        <a href="#">Structure Your Automation</a>
        <a href="#">Automation Walkthrough</a>
        <a href="#">Intro Into Automation - Practice Questions</a>
      </div>
    </div>
  </div>
</section>

Leave a Reply

Your email address will not be published. Required fields are marked *