Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML CSS Flux. Trying to get 2 items per row

fusion

fusion

New Coder
Morning all, I have been struggling with getting my flex to show 2 items per row on a desktop scree. I have searched the internet and tried to use flex-basis: 1 with min-width: 0, flex-basis: 50% and so many other things I have found online but none of it has worked.

Thanks in advancewd to anyone offering a solution as I have been working on trying to get this to work for almost 2 weeks.

I have added my code below but it can also be viewed on codepen.io

HTML: 
<section class="nowshowing">
  <a class="anchor_about" id="NowShowing"></a>
  <h2>Now Showing</h2>
  <hr>
  <div class="now_showing_container">
    <div class="movie_card">
      <div class="card">
        <div class="front">
          <div class="front_side_one">
            <div class="front_heading">
              <h3>Avatar: The Way of Water</h3>
              <p>192 Minutes</p>
            </div>
          </div>
          <div class="front_side_two">
            <div class="images">
              <div class="movie_poster">
                <img src="https://www.themoviedb.org/t/p/w220_and_h330_face/1yppMeTNQwDrzaUH4dRCx4mr8We.jpg" alt="ACT Poster">
              </div>
              <div class="movie_classification">
                <img src="https://www.classification.gov.au/sites/default/files/styles/featured_image/public/2019-08/classification-m-square.png?itok=e3fazVbS" alt="Classification: M">
              </div>
            </div>
          </div>
        </div>
        <div class="back">
          <div class="back_side_one">
            <div class="back_heading">
              <h3>Avatar: The Way of Water</h3>
            </div>
            <hr>
            <div class="movie_cast">
              <div class="general_informaiton">
                <div class="distributor">
                  <span>Distributor: </span>
                  <p>Walt Disney Studios</p>
                </div>
                <div class="director">
                  <span>Director: </span>
                  <p>James Cameron</p>
                </div>
              </div>
              <hr>
              <div class="actors_container">
                <div class="actor">
                  <div class="actor_image">
                    <img src="https://www.themoviedb.org/t/p/w138_and_h175_face/blKKsHlJIL9PmUQZB8f3YmMBW5Y.jpg">
                  </div>
                  <div class="actor_information">
                    <div class="actor_name">
                      <h4>Sam Worthington</h4>
                    </div>
                    <div class="charector">
                      <p>Jake Sully</p>
                    </div>
                  </div>
                </div>
                <div class="actor">
                  <div class="actor_image">
                    <img src="https://www.themoviedb.org/t/p/w138_and_h175_face/vQBwmsSOAd0JDaEcZ5p43J9xzsY.jpg">
                  </div>
                  <div class="actor_information">
                    <div class="actor_name">
                      <h4>Zoe Saldaña</h4>
                    </div>
                    <div class="charector">
                      <p>Neytiri</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="back_side_two">
            <div class="movie_rating">
              <span>Rating: </span>
              <dim class="rating_information">
                <div class="rating_image">
                  <img src="https://www.classification.gov.au/sites/default/files/styles/featured_image/public/2019-08/classification-m-square.png?itok=e3fazVbS">
                </div>
                <div class="rating_text">
                  <p>Science fiction themes, action violence and coarse language</p>
                </div>
              </dim>
            </div>
            <div class="movie_duration">
              <span>Duration: </span>
              <p>192 Minutes</p>
            </div>
            <hr>
            <div class="synopsis">
              <p>Set more than a decade after the events of the first film, Avatar: The Way of Water begins to tell the story of the Sully family (Jake, Neytiri, and their kids), the trouble that follows them, the lengths they go to keep each other safe, the battles they fight to stay alive, and the tragedies they endure. </p>
            </div>
            <hr>
            <div class="seassion_times">
              <h3>Session Times</h3>
              <div class="time_card_container">
                <button class="time_card">
                  <div class="cinema_type">
                    <div class="cineam_gold icon"></div>
                  </div>
                  <div class="day">
                    <p>MON-TUE</p>
                  </div>
                  <div class="time">
                    <p>9pm</p>
                  </div>
                </button>
                <button class="time_card">
                  <div class="cinema_type">
                    <div class="cinema_std icon"></div>
                  </div>
                  <div class="day">
                    <p>WED-FRI</p>
                  </div>
                  <div class="time">
                    <p>9pm</p>
                  </div>
                </button>
                <button class="time_card">
                  <div class="cinema_type">
                    <div class="cinema_std icon"></div>
                  </div>
                  <div class="day">
                    <p>SAT-SUN</p>
                  </div>
                  <div class="time">
                    <p>6pm</p>
                  </div>
                </button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="movie_card">
      <div class="card">
        <div class="front">
          <div class="front_side_one">
            <div class="front_heading">
              <h3>Avatar: The Way of Water</h3>
              <p>192 Minutes</p>
            </div>
          </div>
          <div class="front_side_two">
            <div class="images">
              <div class="movie_poster">
                <img src="https://www.themoviedb.org/t/p/w220_and_h330_face/1yppMeTNQwDrzaUH4dRCx4mr8We.jpg" alt="ACT Poster">
              </div>
              <div class="movie_classification">
                <img src="https://www.classification.gov.au/sites/default/files/styles/featured_image/public/2019-08/classification-m-square.png?itok=e3fazVbS" alt="Classification: M">
              </div>
            </div>
          </div>
        </div>
        <div class="back">
          <div class="back_side_one">
            <div class="back_heading">
              <h3>Avatar: The Way of Water</h3>
            </div>
            <hr>
            <div class="movie_cast">
              <div class="general_informaiton">
                <div class="distributor">
                  <span>Distributor: </span>
                  <p>Walt Disney Studios</p>
                </div>
                <div class="director">
                  <span>Director: </span>
                  <p>James Cameron</p>
                </div>
              </div>
              <hr>
              <div class="actors_container">
                <div class="actor">
                  <div class="actor_image">
                    <img src="https://www.themoviedb.org/t/p/w138_and_h175_face/blKKsHlJIL9PmUQZB8f3YmMBW5Y.jpg">
                  </div>
                  <div class="actor_information">
                    <div class="actor_name">
                      <h4>Sam Worthington</h4>
                    </div>
                    <div class="charector">
                      <p>Jake Sully</p>
                    </div>
                  </div>
                </div>
                <div class="actor">
                  <div class="actor_image">
                    <img src="https://www.themoviedb.org/t/p/w138_and_h175_face/vQBwmsSOAd0JDaEcZ5p43J9xzsY.jpg">
                  </div>
                  <div class="actor_information">
                    <div class="actor_name">
                      <h4>Zoe Saldaña</h4>
                    </div>
                    <div class="charector">
                      <p>Neytiri</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="back_side_two">
            <div class="movie_rating">
              <span>Rating: </span>
              <dim class="rating_information">
                <div class="rating_image">
                  <img src="https://www.classification.gov.au/sites/default/files/styles/featured_image/public/2019-08/classification-m-square.png?itok=e3fazVbS">
                </div>
                <div class="rating_text">
                  <p>Science fiction themes, action violence and coarse language</p>
                </div>
              </dim>
            </div>
            <div class="movie_duration">
              <span>Duration: </span>
              <p>192 Minutes</p>
            </div>
            <hr>
            <div class="synopsis">
              <p>Set more than a decade after the events of the first film, Avatar: The Way of Water begins to tell the story of the Sully family (Jake, Neytiri, and their kids), the trouble that follows them, the lengths they go to keep each other safe, the battles they fight to stay alive, and the tragedies they endure. </p>
            </div>
            <hr>
            <div class="seassion_times">
              <h3>Session Times</h3>
              <div class="time_card_container">
                <button class="time_card">
                  <div class="cinema_type">
                    <div class="cineam_gold icon"></div>
                  </div>
                  <div class="day">
                    <p>MON-TUE</p>
                  </div>
                  <div class="time">
                    <p>9pm</p>
                  </div>
                </button>
                <button class="time_card">
                  <div class="cinema_type">
                    <div class="cinema_std icon"></div>
                  </div>
                  <div class="day">
                    <p>WED-FRI</p>
                  </div>
                  <div class="time">
                    <p>9pm</p>
                  </div>
                </button>
                <button class="time_card">
                  <div class="cinema_type">
                    <div class="cinema_std icon"></div>
                  </div>
                  <div class="day">
                    <p>SAT-SUN</p>
                  </div>
                  <div class="time">
                    <p>6pm</p>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS: 
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@1,700&display=swap');

/* Default Colours */
:root {
    /* Text Light*/
    --AliceBlue: #D9F0FF;
    /* Text */
    --White: #FFFFFF;
    /* Text Dark */
    --VoiletBlue: #6F73D2;
    /* Active Button Light */
    --BabyBlue: #A3D5FF;
    /* Active Button Dark */
    --BrightNavyBlue: #0070CC;
    /* Buttons Light*/
    --LightSkyBlue: #83C9F4;
    /* Button */
    --BlueJeans: #43ADEF;
    /* Button Dark */
    --HonoluluBlue: #0F6EA9;
    /* Background Light */
    --Glaucous: #7681B3;
    /* Background */
    --PurpleNavy: #485384;
    /* Background Dark */
    --SpaceCadet: #333A5C;
    /* Table Odd */
    --DarkBlueGray: #616EA8;
    /* Gold Class */
    --MetallicGold: #CCAD00;
}

/* Defaults */
* {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {background-color: var(--SpaceCadet); color: var(--White); font-family: 'Montserrat', sans-serif;}

/* Now Showing - Flip Card */
.now_showing_container {display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 30px; padding-bottom: 20px; gap: 20px;}
.movie_card {width: 350px; height: 568px; perspective: 1500px;}
.movie_card:hover > .card {cursor: pointer; transform: rotateY(180deg);}
.card {height: 100%; width: 100%; position: relative; transition: transform 1500ms; transform-style: preserve-3d;}
.front, .back {height: 100%; width: 100%; border-radius: 15px; box-shadow: 0 0 5px 2px var(--PurpleNavy); position: absolute; backface-visibility: hidden; background-color: var(--PurpleNavy);}
.back {transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; align-items: center;}   

/* Now Showing - Images */
.movie_poster img {width: 350px; height: 500px; border-radius: 0 0 15px 15px;}
.movie_classification {position: fixed; bottom: 20px; right: 20px;}
.movie_classification img {width: 64px; height: 64px; border-radius: 0;}

/* Now Showing - Back Cover */
.movie_cast {display: none;}
.movie_rating {display: flex; flex-direction: column; margin-left: 50px;}
.rating_information {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px;}
.rating_image img {height: 32px; width: 32px;}
.back span {font-weight: bolder; text-align: left;}
.back_side_one hr {width: 100%; color: var(--LightSkyBlue); margin: 5px;}
.back_side_two hr {width: 70%; color: var(--LightSkyBlue); margin: 5px 50px;}
.rating_text { text-align: left; width: 200px;}
.movie_duration {display: flex; flex-direction: row; align-items: center; margin-left: 50px;}
.movie_duration span {text-align: left;}
.synopsis {margin: 0 30px;}
.time_card_container {display: flex; flex-direction: row; gap: 5px; justify-content: center; align-items: center;}
.time_card {position: relative; border-radius: 15px; border: 1px solid var(--VoiletBlue); padding: 10px; height: 75px; width: 110px; background-color: transparent; color: var(--AliceBlue); cursor: pointer;}
.time_card:hover {background-color: var(--Glaucous);}
.day {position: absolute; top: 0;}
.day p, .time p {font-family: 'Sofia Sans', sans-serif;}
.day p {font-size: 12px;}
.time {position: absolute; bottom: 15px; left: 15px;}
.time p {font-weight: bolder; font-size: 15px;}
.cineam_gold {background-color: var(--MetallicGold);}
.cinema_std {background-color: var(--VoiletBlue);}
.icon {position: absolute; top: 0; right: -1px; width: 15px; height: 74px; border-radius: 0 15px 15px 0;}

/* Tablet Screen Styles. Screen width 721 - 990 px */
@media only screen and (min-width: 721px) {
      /* Now Showing - Flip Card */
    .movie_card {width: 650px;}
    .front {display: flex; flex-direction: row; justify-content: center; align-items: center;}
    .back {display: flex; flex-direction: row; justify-content: center; align-items: center;}

    /* Now Showing - Front Side One */
    .front_side_one {flex-grow: 1; text-align: center;}

    /* Now Showing - Front Side Two */
    .movie_poster {margin-top: 4px;}
    .movie_poster img {height: 566px; border-radius: 0 15px 15px 0;}

    /* Now Showing - Back Side One */
    .back_side_one {width: 325px; display: flex; flex-direction: column; align-items: center;}
    .back_side_two {width: 325px;}
    .back_side_one hr {width: 85%; margin-left: 25px;}
    .movie_cast {display: flex; flex-direction: column;}
    .director, .distributor {display: flex; flex-direction: row; align-items: center; margin-left: 25px;}
    .director span, .distributor span {width: 95px;}
    .actors_container {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px;}
    .actor {position: relative; border-radius: 15px; border: 1px solid var(--VoiletBlue); margin-top: 10px; height: 250px; width: 130px; background-color: var(--VoiletBlue);}
    .actor_image img {height: 150px; width: 130px;  border-radius: 15px 15px 0 0;}
    .actor_image {position: absolute; top: 0; right: 0;}
    .actor_information {position: absolute; font-family: 'Sofia Sans', sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center;bottom: 25px; left: 0;}
    .actor_name {width: 130px; text-align: center;}
    .actor_information h4 {font-size: 15px; font-weight: bold;}
}

/* Desktop and larger screen styles. Screen width 991 px + */
@media only screen and (min-width: 991px) {
 
}
 
Sort by date Sort by votes
Unless you specifically want to use flex, you could go for a grid layout.

www.w3schools.com

CSS Grid Layout

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom