how to center align a group of radio buttons under the center of the quiz title and keep responsive?

To center align a group of radio buttons under the center of the quiz title and keep it responsive, you can use CSS Flexbox along with media queries for responsiveness. Flexbox provides an easy and flexible way to create responsive layouts, and media queries allow you to adjust the styling based on the screen size or viewport width.

Here's a step-by-step guide on how to achieve this:

1. HTML Structure: First, create the HTML structure for your quiz title and radio buttons. Make sure to wrap the radio buttons in a container element to apply the Flexbox layout.

htmlCopy code
<div class="quiz-container">
  <h1 class="quiz-title">Quiz Title</h1>
  <div class="radio-buttons">
    <input type="radio" name="option" id="option1">
    <label for="option1">Option 1</label>
    <!-- Add more radio buttons as needed -->
  </div>
</div>

2. CSS Styling: Apply the CSS styles to center align the radio buttons under the quiz title using Flexbox.

cssCopy code
/* CSS reset (optional) */
body, h1 {
  margin: 0;
  padding: 0;
}

/* Center align the quiz title */
.quiz-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.quiz-title {
  font-size: 24px;
  margin-bottom: 20px;
}

/* Center align the radio buttons horizontally */
.radio-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Add some margin between the radio buttons */
.radio-buttons input[type="radio"] + label {
  margin: 5px;
}

3. Media Queries for Responsiveness: To make the layout responsive, use media queries to adjust the styling based on the screen size. For example, you can change the font size of the quiz title and adjust the number of columns for radio buttons on smaller screens.

cssCopy code
/* Responsive styles */
@media (max-width: 768px) {
  .quiz-title {
    font-size: 20px;
  }

  .radio-buttons {
    flex-direction: column;
  }
}

In this example, we use a media query with a max-width of 768px to apply the responsive styles for screens smaller than or equal to 768 pixels wide. The quiz title font size is reduced, and the radio buttons are stacked vertically in a single column.

By using Flexbox and media queries, you can easily center align the group of radio buttons under the center of the quiz title and make it responsive to different screen sizes. Adjust the CSS styles and media queries as needed to match your specific design requirements.