Html - How do i make my divs appear in a row with wider screens

BenBarker
August 29, 2023
144 views
0 votes
2 Answers

I’m coding the website mobile first and was just wondering how to make the club times divs go side by side when the screen gets bigger.

/*Google Fonts*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Pacifico&display=swap');

/*wildcard selector*/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/*General Styles*/

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /*Generic project styles*/
  color: #3a3a3a;
  font-family: "lato", sans-serif;
}

h1 {
  font-family: "pacifico", sans-serif;
  color: #252525;
}

.white-background {
  background-color: #ffffff;
}

.black-background {
  background-color: #252525;
}

.white-text {
  color: #ffffff;
}

.black-text {
  color: #252525;
}


/*header*/

header {
  background-color: #ffffff;
  padding: 0 1rem;
  position: fixed;
  z-index: 10;
  width: 100%;
  box-shadow: 0 2px 2px #3a3a3a;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}

header a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-family: "pacifico", sans-serif;
  color: #252525;
}

#menu {
  font-size: 110%;
  list-style-type: none;
}

#menu li {
  margin-bottom: 1em;
}

.active {
  border-bottom: 1px solid #3a3a3a;
}


/*Navbar styles with dropdown toggle*/

nav {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  box-shadow: 0 2px 2px #3a3a3a;
  padding: 0 1rem;
  left: 0;
  display: none;
  justify-content: space-between;
  align-items: baseline;
  top: 100%;
}


/*nav toggle*/

#nav-toggle:checked~nav {
  display: block;
}

#nav-toggle {
  display: none;
}

#nav-toggle-label {
  font-size: 2rem;
}


/*Main*/

main {
  margin-top: 55px;
  flex: 1 0 auto;
}


/*Hero*/

#hero {
  height: 600px;
  width: 100%;
  background: url("../assets/images/pexels-anastasia-shuraeva-8466017 (1).jpg") no-repeat center center/cover;
  position: relative;
}

#hero h2 {
  font-family: "pacifico", sans-serif;
}

#hero h2,
#hero h3 {
  color: #ffffff;
}

#cover-text {
  background-color: rgba(0, 0, 0, .7);
  font-size: 130%;
  position: absolute;
  bottom: 30px;
  width: 89%;
  min-height: 200px;
  padding-top: 40px;
  padding-left: 10px;
}


/*About us*/

#about {
  height: 600px;
  width: 100%;
  color: #ffffff;
  padding-top: 2rem;
}

#about-us {
  text-align: center;
}

#about-us h1 {
  font-size: 170%;
  font-family: inherit;
}

#about-us {
  font-size: 130%;
}

#what-we-offer {
  padding-top: 2rem;
  text-align: center;
}

#offer-list li {
  padding: 20px;
  text-align: center;
}


/*Club times*/

#club-times h1 {
  color: #ffffff;
  padding-top: 1rem;
  text-align: center;
  font-family: inherit;
}

#club-times div {
  padding: 1rem;
  text-align: center;
  flex-basis: 200px;
  flex-grow: 1;
}


/*Footer*/

#social-media {
  text-align: center;
  padding: 20px 0;
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
}

#social-media i {
  font-size: 160%;
  padding: 5%;
}


/* Media query: tablets and larger (768px and up) */

@media screen and (min-width: 768px) {
  /* Header */
  nav {
    display: block;
    position: relative;
    box-shadow: none;
    width: fit-content;
    padding-top: 1.5rem;
  }
  #menu {
    display: flex;
  }
  #menu>li {
    padding-left: 1rem;
  }
  #nav-toggle-label {
    display: none;
  }
  #logo {
    font-size: 280%;
    line-height: 75px;
    margin: 0 0.5rem;
  }
  /*Main*/
  main {
    margin-top: 75px;
  }
  /*Hero*/
  #cover-text {
    width: 400px;
    right: 0;
  }
  /*About us*/
  #about {
    height: 400px;
  }
}


/*Media query: laptops and larger (992px and up)*/

@media screen and (min-width: 992px) {
  #menu a:hover {
    border-bottom: 1px solid #3a3a3a;
  }
}

<!--Header-->
<header>
  <a href="index.html">
    <h1 id="logo">Ben's Chess Club</h1>
  </a>
  <input type="checkbox" id="nav-toggle" name="nav-toggle">
  <label for="nav-toggle" id="nav-toggle-label"><i class="fa-solid fa-bars" style="color: #17191c;"></i></i></label>
  <nav>
    <ul id="menu">
      <li><a href="index.html" class="active">Home</a></li>
      <li><a href="sign-up.html">Sign Up</a></li>
      <li><a href="contact-us.html">Contact us</a></li>
    </ul>
  </nav>
</header>

<!--Main-->
<main>
  <!--Hero-->
  <section id="hero">
    <div id="cover-text">
      <h2>Bens Chess Club</h2>
      <h3>Join our chess club <br> for ages 8-18</h3>
    </div>
  </section>

  <!--About section-->
  <section id="about" class="white-background">
    <div id="about-us" class="black-text">
      <h1>About us</h1>
      <br>
      <h2>Learn how to play chess, make friends and have fun.</h2>
    </div>
    <div id="what-we-offer" class="black-text">
      <p>
        <h2>What we offer:</h2>
      </p>
      <ul id="offer-list" class="black-text">
        <li>
          <h3><i class="fa-solid fa-chess-pawn" style="color: #252525;"></i> Weekly meet-ups for different age groups</h3>
        </li>
        <li>
          <h3><i class="fa-solid fa-chess-pawn" style="color: #252525;"></i> A safe and non-toxic enviroment</h3>
        </li>
        <li>
          <h3><i class="fa-solid fa-chess-pawn" style="color: #252525;"></i> A fun and friendly place where it is easy to make lots of friends</h3>
        </li>
      </ul>
    </div>
  </section>

  <!--Club times-->
  <section id="club-times" class="black-background , white-text">
    <h1>Club Times</h1>
    <div>
      <h2>Ages 8-12</h2>
      <h3>Friday</h3>
      <h3>17:30</h3>
    </div>
    <div>
      <h2>Ages 13-15</h2>
      <h3>Saturday</h3>
      <h3>10:30</h3>
    </div>
    <div>
      <h2>Ages 16-18</h2>
      <h3>sunday</h3>
      <h3>12:00</h3>
    </div>
  </section>
</main>

<!--Footer-->
<footer>
  <ul id="social-media">
    <li><a href="https://en-gb.facebook.com/" target="_blank" rel="noopener" aria-label="Visit our facebook page (opens in new tab)"><i class="fa-brands fa-facebook" style="color: #2c56a0;"></i></a></li>
    <li><a href="https://twitter.com/home" target="_blank" rel="noopener" aria-label="Visit our Twitter page (opens in new tab)"><i class="fa-brands fa-x-twitter" style="color: #1a1c1e;"></i></i></a></li>
    <li><a href="https://www.instagram.com/" target="_blank" rel="noopener" aria-label="Visit our instagrampage (opens in new tab)"><i class="fa-brands fa-instagram" style="color: #640c61;"></i></a></li>
    <li><a href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Visit our Youtube (opens in new tab)"><i class="fa-brands fa-youtube" style="color: #fd2626;"></i></a></li>
  </ul>
</footer>
<!--Font awsome kit-->
<script src="https://kit.fontawesome.com/bf524db846.js" crossorigin="anonymous"></script>

Tags: css html

Answers

- AlainPaulinNiyonkuru
- August 29, 2023 at 7:52 pm
- 0 votes
0
To make the "Club Times" divs go side by side when the screen gets bigger, you need to use CSS flexbox or grid layout to create a responsive layout. Since you mentioned you’re coding the website with a mobile-first approach, I’ll provide you with an example of how to modify your existing CSS to achieve this using flexbox.

Here’s what you can do:
1. Add a new CSS rule for the #club-times container to set it as a flex container and control the layout of its child divs.
```
/* Club times */
#club-times {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to multiple rows */
    justify-content: center; /* Center content horizontally */
    align-items: stretch; /* Stretch items to fill the container vertically */
    padding: 2rem 0;
    text-align: center;
    background-color: #252525;
    color: #ffffff;
}

#club-times div {
    padding: 1rem;
    text-align: center;
    flex: 1 0 33%; /* Distribute items evenly in 3 columns */
}
```
By setting display: flex on the #club-times container, you’re enabling the flex layout. The flex-wrap: wrap property ensures that the child divs will wrap onto multiple rows when the screen width is insufficient.

The justify-content: center centers the child divs horizontally, and align-items: stretch ensures that the child divs stretch to fill the container’s height equally.

The flex: 1 0 33% on the #club-times div specifies that the child divs should grow and shrink equally, with a basis of 33% (one-third) of the available space. This allows you to have three columns when the screen is wide enough.

This layout will make the "Club Times" divs go side by side on larger screens while still being responsive on smaller screens. Make sure to test this layout on different screen sizes to ensure that it behaves as expected.
Login or Signup to reply.

Lots of other things but I just gave the times a container and set up wrap – other styling you can adjust as desired.

/*Google Fonts*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Pacifico&display=swap');

/*wildcard selector*/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/*General Styles*/

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /*Generic project styles*/
  color: #3a3a3a;
  font-family: "lato", sans-serif;
}

h1 {
  font-family: "pacifico", sans-serif;
  color: #252525;
}

.white-background {
  background-color: #ffffff;
}

.black-background {
  background-color: #252525;
}

.white-text {
  color: #ffffff;
}

.black-text {
  color: #252525;
}


/*header*/

header {
  background-color: #ffffff;
  padding: 0 1rem;
  position: fixed;
  z-index: 10;
  width: 100%;
  box-shadow: 0 2px 2px #3a3a3a;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}

header a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-family: "pacifico", sans-serif;
  color: #252525;
}

#menu {
  font-size: 110%;
  list-style-type: none;
}

#menu li {
  margin-bottom: 1em;
}

.active {
  border-bottom: 1px solid #3a3a3a;
}


/*Navbar styles with dropdown toggle*/

nav {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  box-shadow: 0 2px 2px #3a3a3a;
  padding: 0 1rem;
  left: 0;
  display: none;
  justify-content: space-between;
  align-items: baseline;
  top: 100%;
}


/*nav toggle*/

#nav-toggle:checked~nav {
  display: block;
}

#nav-toggle {
  display: none;
}

#nav-toggle-label {
  font-size: 2rem;
}


/*Main*/

main {
  margin-top: 55px;
  flex: 1 0 auto;
}


/*Hero*/

#hero {
  height: 600px;
  width: 100%;
  background: url("../assets/images/pexels-anastasia-shuraeva-8466017 (1).jpg") no-repeat center center/cover;
  position: relative;
}

#hero h2 {
  font-family: "pacifico", sans-serif;
}

#hero h2,
#hero h3 {
  color: #ffffff;
}

#cover-text {
  background-color: rgba(0, 0, 0, .7);
  font-size: 130%;
  position: absolute;
  bottom: 30px;
  width: 89%;
  min-height: 200px;
  padding-top: 40px;
  padding-left: 10px;
}


/*About us*/

#about {
  height: 600px;
  width: 100%;
  color: #ffffff;
  padding-top: 2rem;
}

#about-us {
  text-align: center;
}

#about-us h1 {
  font-size: 170%;
  font-family: inherit;
}

#about-us {
  font-size: 130%;
}

#what-we-offer {
  padding-top: 2rem;
  text-align: center;
}

#offer-list li {
  padding: 20px;
  text-align: center;
}


/*Club times*/

.club-times {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  background-color: #00ffff40;
}

.club-times-container {
  display: flex;
  flex-basis: 200px;
  flex-wrap: wrap;
}

.club-times h1 {
  color: #ffffff;
  padding-top: 1rem;
  text-align: center;
  font-family: inherit;
}

.time-block {
  margin: 0.5em;
  padding: 0.25em;
  background-color: #E0E0E0;
  text-align: center;
}
/*
.club-times div {
  padding: 1rem;
  text-align: center;
  flex-basis: 200px;
  flex-grow: 1;
}
*/


/*Footer*/

#social-media {
  text-align: center;
  padding: 20px 0;
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
}

#social-media i {
  font-size: 160%;
  padding: 5%;
}


/* Media query: tablets and larger (768px and up) */

@media screen and (min-width: 768px) {
  /* Header */
  nav {
    display: block;
    position: relative;
    box-shadow: none;
    width: fit-content;
    padding-top: 1.5rem;
  }
  #menu {
    display: flex;
  }
  #menu>li {
    padding-left: 1rem;
  }
  #nav-toggle-label {
    display: none;
  }
  #logo {
    font-size: 280%;
    line-height: 75px;
    margin: 0 0.5rem;
  }
  /*Main*/
  main {
    margin-top: 75px;
  }
  /*Hero*/
  #cover-text {
    width: 400px;
    right: 0;
  }
  /*About us*/
  #about {
    height: 400px;
  }
}


/*Media query: laptops and larger (992px and up)*/

@media screen and (min-width: 992px) {
  #menu a:hover {
    border-bottom: 1px solid #3a3a3a;
  }
}

<!--Header-->
<header>
  <a href="index.html">
    <h1 id="logo">Ben's Chess Club</h1>
  </a>
  <input type="checkbox" id="nav-toggle" name="nav-toggle">
  <label for="nav-toggle" id="nav-toggle-label"><i class="fa-solid fa-bars" style="color: #17191c;"></i></i></label>
  <nav>
    <ul id="menu">
      <li><a href="index.html" class="active">Home</a></li>
      <li><a href="sign-up.html">Sign Up</a></li>
      <li><a href="contact-us.html">Contact us</a></li>
    </ul>
  </nav>
</header>

<!--Main-->
<main>
  <!--Hero-->
  <section id="hero">
    <div id="cover-text">
      <h2>Bens Chess Club</h2>
      <h3>Join our chess club <br> for ages 8-18</h3>
    </div>
  </section>

  <!--About section-->
  <section id="about" class="white-background">
    <div id="about-us" class="black-text">
      <h1>About us</h1>
      <br>
      <h2>Learn how to play chess, make friends and have fun.</h2>
    </div>
    <div id="what-we-offer" class="black-text">
      <p>
        <h2>What we offer:</h2>
      </p>
      <ul id="offer-list" class="black-text">
        <li>
          <h3><i class="fa-solid fa-chess-pawn" style="color: #252525;"></i> Weekly meet-ups for different age groups</h3>
        </li>
        <li>
          <h3><i class="fa-solid fa-chess-pawn" style="color: #252525;"></i> A safe and non-toxic enviroment</h3>
        </li>
        <li>
          <h3><i class="fa-solid fa-chess-pawn" style="color: #252525;"></i> A fun and friendly place where it is easy to make lots of friends</h3>
        </li>
      </ul>
    </div>
  </section>

  <!--Club times-->
  <section class="club-times" id="club-times" class="black-background , white-text">
    <h1>Club Times</h1>
    <div class="club-times-container">
      <div class="time-block">
        <h2>Ages 8-12</h2>
        <h3>Friday</h3>
        <h3>17:30</h3>
      </div>
      <div class="time-block">
        <h2>Ages 13-15</h2>
        <h3>Saturday</h3>
        <h3>10:30</h3>
      </div>
      <div class="time-block">
        <h2>Ages 16-18</h2>
        <h3>sunday</h3>
        <h3>12:00</h3>
      </div>
    </div>
  </section>
</main>

<!--Footer-->
<footer>
  <ul id="social-media">
    <li><a href="https://en-gb.facebook.com/" target="_blank" rel="noopener" aria-label="Visit our facebook page (opens in new tab)"><i class="fa-brands fa-facebook" style="color: #2c56a0;"></i></a></li>
    <li><a href="https://twitter.com/home" target="_blank" rel="noopener" aria-label="Visit our Twitter page (opens in new tab)"><i class="fa-brands fa-x-twitter" style="color: #1a1c1e;"></i></i></a></li>
    <li><a href="https://www.instagram.com/" target="_blank" rel="noopener" aria-label="Visit our instagrampage (opens in new tab)"><i class="fa-brands fa-instagram" style="color: #640c61;"></i></a></li>
    <li><a href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Visit our Youtube (opens in new tab)"><i class="fa-brands fa-youtube" style="color: #fd2626;"></i></a></li>
  </ul>
</footer>
<!--Font awsome kit-->
<script src="https://kit.fontawesome.com/bf524db846.js" crossorigin="anonymous"></script>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do i make my divs appear in a row with wider screens

Answers