Reputation: 13

Flex-box container confusion

body{
    font-family: "Roboto", "Helvetica","Sans-serif";
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #777;
    line-height: 1.7;
}
h1,h2{
    font-family: "Playfair Display", serif;
    font-weight: 500;
} 
.agents{
    margin-left: 5%;
    padding-bottom: 100px;
}
.agents h1{
    font-size: 40px;
    margin-bottom: -1.5%;
}
.services{
    background-color: rgba(221, 218, 218, 0.404);
    display: flex;
    flex-direction: row;
    width: 1400px
}

ion-icon{
    font-size: 250%;
    color: rgb(255, 162, 40);
    margin-top: 15px;
    padding-right: 20px;
    padding-left: 20px;
    
}

.about{
    margin-top: 5%;
}
.large-paragraph{
    font-size: 1.25rem;
    font-weight: 300;
}
.about a{
    background-color: rgb(255, 162, 40);
    text-decoration: none;
    color: rgb(255, 255, 255);
    padding: 15px 30px;
    line-height: 1.5;
    font-size: 16px;
    border-radius: 30px;
    margin-top: 10%;
}
.left img{
    width: 55%;
    margin-left: 20%;
    margin-top: 5%;
    padding-bottom: 100px;
}
.profiles{
    width: 375px;
    margin: 2%;
    background-color: rgba(221, 218, 218, 0.616);
}
.profiles img{
    width: 100%;
}
h1{
    color: rgb(255, 162, 40);
}
.services h1{
    font-size: 300%;
}
.about h1{
    font-size: 250%;
    letter-spacing: 2%;
    word-spacing: 2%;
}
h3{
    font-family: playfair-display, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: black;
}
.profile p, .profile h3{
    padding-left: 30px;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styling.css">
    <link rel="stylesheet" href="https://use.typekit.net/hut3eue.css">
  </head>
  <body>
    <section class="agents">
      <h1>Agents</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus minima neque tempora reiciendis.</p>
      <div class="row">
        <div class="profiles">
          <img src="images/person_1.jpg" alt="Kaiara Spencer">
          <h3>Kaiara Spencer</h3>
          <small>Real Estate Agent</small>
        </div>
        <div class="profiles">
          <img src="images/person_2.jpg" alt="Dave Simpson">
          <h3>Dave Simpson</h3>
          <small>Real Estate Agent</small>
        </div>
        <div class="profiles">
          <img src="images/person_3.jpg" alt="Ben Thompson">
          <h3>Ben Thompson</h3>
          <small>Real Estate Agent</small>
        </div>
      </div>
      <div class="row">
        <div class="profiles">
          <img src="images/person_4.jpg" alt="Kyla Stewart">
          <h3>Kyla Stewart</h3>
          <small>Real Estate Agent</small>
        </div>
        <div class="profiles">
          <img src="images/person_5.jpg" alt="Rich Moffatt">
          <h3>Rich Moffatt</h3>
          <small>Real Estate Agent</small>
        </div>
        <div class="profiles">
          <img src="images/person_6.jpg" alt="Stuart Redman">
          <h3>Stuart Redman</h3>
          <small>Real Estate Agent</small>
        </div>
      </div>
    </section>
    <hr>
    <section class="about">
      <div class="row">
        <div class="left">
          <img src="images/property_1.jpg">
        </div>
        <div class="right">
          <h1>We Are the Best Real <br>
            Estate Company</h1>
          <p class="large-paragraph">Lorem ipsum dolor sit amet consectetur <br>
            adipisicing elit.</p>
          <p>Est qui eos ratione nostrum excepturi id recusandae fugit <br>
            omnis ullam pariatur itaque nisi voluptas impedit Quo suscipit <br>
            omnis iste velit maxime.</p>
          <ul>
            <li>Placeat maxime animi minus</li>
            <li>Placeat maxime animi minus</li>
            <li>Placeat maxime animi minus</li>
            <li>Placeat maxime animi minus</li>
            <li>Placeat maxime animi minus</li>
          </ul>
          <br/>
          <br/>
          <a href="#">Learn More</a>
        </div>
      </div>
    </section>
    <section class="services">
      <h1>Services</h1>
        <div class="row">
          <div class="box">
            <div><ion-icon name="home"></ion-icon></div>
            <div>
              <h3>Search Property</h3>
              <p>Lorem ipsum dolor sit amet<br>
                consectetur adipisicing elit.<br>
                Perferendis quis molestiae vitae
                eligendi at.
              </p>
              <a href="#">Learn More</a>
            </div>
          </div>
          <div class="box">
            <div><ion-icon name="home"></ion-icon></div>
            <div>
              <h3>Search Property</h3>
              <p>Lorem ipsum dolor sit amet<br>
                consectetur adipisicing elit.<br>
                Perferendis quis molestiae vitae
                eligendi at.
              </p>
              <a href="#">Learn More</a>
            </div>
          </div>
          <div class="box">
            <div><ion-icon name="home"></ion-icon></div>
            <div>
              <h3>Search Property</h3>
              <p>Lorem ipsum dolor sit amet<br>
                consectetur adipisicing elit.<br>
                Perferendis quis molestiae vitae
                eligendi at.
              </p>
              <a href="#">Learn More</a>
            </div>
          </div>
        </div>
    </section>
  </body>
  <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</html>

What I am trying to do is get the flex container "row" in the "services" section to quite literally display as a row but for some reason it is displaying as a column. I'm not allowed to used to use flex grid for this(as a challenge) and I have tried putting it all in another tag to see if that would do anything but nothing seems to be working.

Upvotes: 1

Answers (4)

Mark Schultheiss

Reputation: 34168

Your question is somewhat confusing but if you mean the CONTENTS OF .row of profiles this should work: (If you mean the rows in the container .agents that is slightly different but perhaps you can build from this?)

body {
  font-family: "Roboto", "Helvetica", "Sans-serif";
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  color: #777;
  line-height: 1.7;
}

h1,
h2 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
}

.agents {
  margin-left: 5%;
  padding-bottom: 100px;
}

.agents h1 {
  font-size: 40px;
  margin-bottom: -1.5%;
}

.row {
  display: flex;
  flex-direction: row;
}

.services {
  background-color: rgba(221, 218, 218, 0.404);
  display: flex;
  flex-direction: row;
  width: 1400px
}

ion-icon {
  font-size: 250%;
  color: rgb(255, 162, 40);
  margin-top: 15px;
  padding-right: 20px;
  padding-left: 20px;
}

.about {
  margin-top: 5%;
}

.large-paragraph {
  font-size: 1.25rem;
  font-weight: 300;
}

.about a {
  background-color: rgb(255, 162, 40);
  text-decoration: none;
  color: rgb(255, 255, 255);
  padding: 15px 30px;
  line-height: 1.5;
  font-size: 16px;
  border-radius: 30px;
  margin-top: 10%;
}

.left img {
  width: 55%;
  margin-left: 20%;
  margin-top: 5%;
  padding-bottom: 100px;
}

.profiles {
  width: 375px;
  margin: 2%;
  background-color: rgba(221, 218, 218, 0.616);
}

.profiles img {
  width: 100%;
}

h1 {
  color: rgb(255, 162, 40);
}

.services h1 {
  font-size: 300%;
}

.about h1 {
  font-size: 250%;
  letter-spacing: 2%;
  word-spacing: 2%;
}

h3 {
  font-family: playfair-display, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: black;
}

.profile p,
.profile h3 {
  padding-left: 30px;
}

<body>
  <section class="agents">
    <h1>Agents</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus minima neque tempora reiciendis.</p>
    <div class="row">
      <div class="profiles">
        <img src="images/person_1.jpg" alt="Kaiara Spencer">
        <h3>Kaiara Spencer</h3>
        <small>Real Estate Agent</small>
      </div>
      <div class="profiles">
        <img src="images/person_2.jpg" alt="Dave Simpson">
        <h3>Dave Simpson</h3>
        <small>Real Estate Agent</small>
      </div>
      <div class="profiles">
        <img src="images/person_3.jpg" alt="Ben Thompson">
        <h3>Ben Thompson</h3>
        <small>Real Estate Agent</small>
      </div>
    </div>
    <div class="row">
      <div class="profiles">
        <img src="images/person_4.jpg" alt="Kyla Stewart">
        <h3>Kyla Stewart</h3>
        <small>Real Estate Agent</small>
      </div>
      <div class="profiles">
        <img src="images/person_5.jpg" alt="Rich Moffatt">
        <h3>Rich Moffatt</h3>
        <small>Real Estate Agent</small>
      </div>
      <div class="profiles">
        <img src="images/person_6.jpg" alt="Stuart Redman">
        <h3>Stuart Redman</h3>
        <small>Real Estate Agent</small>
      </div>
    </div>
  </section>
  <hr>
  <section class="about">
    <div class="row">
      <div class="left">
        <img src="images/property_1.jpg">
      </div>
      <div class="right">
        <h1>We Are the Best Real <br> Estate Company</h1>
        <p class="large-paragraph">Lorem ipsum dolor sit amet consectetur <br> adipisicing elit.</p>
        <p>Est qui eos ratione nostrum excepturi id recusandae fugit <br> omnis ullam pariatur itaque nisi voluptas impedit Quo suscipit <br> omnis iste velit maxime.</p>
        <ul>
          <li>Placeat maxime animi minus</li>
          <li>Placeat maxime animi minus</li>
          <li>Placeat maxime animi minus</li>
          <li>Placeat maxime animi minus</li>
          <li>Placeat maxime animi minus</li>
        </ul>
        <br/>
        <br/>
        <a href="#">Learn More</a>
      </div>
    </div>
  </section>
  <section class="services">
    <h1>Services</h1>
    <div class="row">
      <div class="box">
        <div>
          <ion-icon name="home"></ion-icon>
        </div>
        <div>
          <h3>Search Property</h3>
          <p>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit.<br> Perferendis quis molestiae vitae eligendi at.
          </p>
          <a href="#">Learn More</a>
        </div>
      </div>
      <div class="box">
        <div>
          <ion-icon name="home"></ion-icon>
        </div>
        <div>
          <h3>Search Property</h3>
          <p>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit.<br> Perferendis quis molestiae vitae eligendi at.
          </p>
          <a href="#">Learn More</a>
        </div>
      </div>
      <div class="box">
        <div>
          <ion-icon name="home"></ion-icon>
        </div>
        <div>
          <h3>Search Property</h3>
          <p>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit.<br> Perferendis quis molestiae vitae eligendi at.
          </p>
          <a href="#">Learn More</a>
        </div>
      </div>
    </div>
  </section>
</body>

Upvotes: 0

Emeka Orji

Reputation: 306

Technically, the '.row' container is not a flex container, so setting the display to flex will automatically solve this problem

.row {
  display: flex;
}

Paste the code above in the css

You should also try refactoring your css, the code is a bit unorganized. For you and others to understand your code better, try using "consistent naming convention", add comments to your code, and style elements in the order of their appearance in the html. Or even more better, have different stylesheets for different components. This would improve your effeciency by .1% (at the least)!!

Upvotes: 2

user31782

Reputation: 7589

If you can't use flexbox, use css grid instead.

The old school way of doing things is use float: left on the divs and give width: 33.33333% to them. Or use display inline block with text-align center.

Upvotes: -1

Sigurd Mazanti

Reputation: 2395

It looks like you forgot to style your row class:

.row {
  display: flex;
  flex-direciton: row;
}

Upvotes: 0

Flex-box container confusion

Answers (4)

Related Questions