"Flexbox perplexity: unraveling the mysteries of

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="026b6d6c6b616d6c7142372c322c32">[email protected]</a>/dist/ionicons.js"></script>
</html>

My goal is to align the 'row' in the 'services' section horizontally using flexbox properties. Despite my efforts to do so by changing the Flex direction to row, the items are still displaying as a column. I was also restricted from using Flex Grid for this challenge. Moving the content into another tag did not resolve the issue either.

htmlcssflexbox

Answer №1

It's worth noting that the '.row' container does not inherently function as a flex container. Simply setting the display property to flex within this container will effectively resolve the issue.

.row {
  display: flex;
}

Add the provided code snippet to your CSS file.

To enhance the readability and organization of your CSS code, consider refactoring it. Utilize a consistent naming convention, include comments for clarity, and structure styles based on the order of HTML elements they correspond to. Alternatively, create separate stylesheets for different components to optimize efficiency by at least 1%!

Answer №2

Your row class appears to be missing some styling:

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

Answer №3

Your query seems a bit unclear, but if you're referring to the CONTENTS OF .row within profiles, this snippet should suffice: (If you're talking about rows in the container .agents, the approach may vary slightly but you can use this as a foundation.)

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;
}
...
.profile p,
.profile h3 {
  padding-left: 30px;
}
<body>
  <section class="agents">
    <h1>Agents</h1>
    ...
        <a href="#">Learn More</a>
      </div>
      </div>
    ...
  </section>
</body>

Answer №4

In the absence of flexbox, consider utilizing CSS grid as an alternative.

An alternative method involves employing float: left on the divs and assigning them a width of 33.33333%. Another option is to use display inline block with text-align center.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble assigning a value to ng-model following a mathematical operation

Currently, I am in the process of developing a filter that allows users to choose a property location based on specific parameters. The filter will allow users to select multiple criteria, and from there, I will perform arithmetic calculations to determine ...

htmlangularjs

Invoke the session on a different page and incorporate it into your JavaScript code

My php files, ajax.php and index.php, contain a mix of php code, html, and javascript. I am developing a quiz website where questions are retrieved from a database using sql in ajax.php and displayed on index.php through an ajax method. The user's sco ...

javascriptphpjqueryhtmlajax

Design a clickable div element embedded within an interactive article using HTML5

Currently, I am facing an issue with placing clickable div elements inside an article tag in HTML5. The problem is that when I try to click the divs, it registers as a click on the article itself. Below is an example of my code: HTML: <article id=&apo ...

javascriptcsshtml

HTML: What is the best way to position one <a> element underneath another <a> element?

My website contains a <div> that serves as a link to address1. Adjacent to this div is a drop-down menu with a link to address2. Strangely, the second link seems to override the first one, making Link1 non-clickable. https://i.sstatic.net/eBAEM.png ...

htmlcss

What is the best way to create an element with adjustable width and height dimensions?

Looking for advice on creating a wrapper element without having to repeatedly adjust the height and width properties. The current code snippet sets a fixed size for the wrapper, but is there a more efficient way to achieve this? .search{ background- ...

css

Is it possible to increase the width of a div by 1% within a loop using solely JavaScript?

I have been attempting to increase the width of the div by 1% using JavaScript. My goal is to create a smooth transition, but traditional animations did not work because I need to set specific conditions. window.onload = function(){ for (let i = 0 ...

javascripthtml

Creating a New Section in your HTML Table

Can a page break be implemented in an HTML table? I've attempted to add page breaks to the following HTML: <html> <title>testfile</title> <meta http-equiv="expires" content="0" /> <meta http-equiv="cache-contr ...

htmlcss

Changing the direction of the submenu to the left instead of the right

My Bootstrap 4 menu has a submenu that appears to the right of the main menu. However, since the menu is positioned on the far right of the screen, it gets cut off on the right side. I'm looking for a way to make the submenu appear on the left side o ...

htmlcsstwitter-bootstrap-4

Is there a way to move the <hr> element closer to the content in the header section?

I am looking to move the closer to the content in the header. I attempted using position-absolute but the disappeared. This marks my inaugural project with bootstrap. <!-- Bootstrap-5 --> <link href="https://cdn.jsdelivr.net/npm/<a href="/ ...

htmlcssbootstrap-5

Tips for implementing a custom filter in an AngularJS JavaScript controller

Can anyone help me with creating a custom filter in an AngularJS JavaScript controller? I need to be able to search for items in an array called segments by their SegmentId. The filter should iterate through the segments array and return the segment that ...

javascripthtmlangularjsangularjs-filter

Creating nested tables by assigning unique Div IDs to each table element

Can we utilize a straightforward JavaScript/jQuery function to nest elements inside table elements? For instance, every square comes with its own unique ID (A1, B7, C5). How can I use this ID to insert the checker image in any selected tile upon clicking? ...

javascriptjqueryhtmlcss

Guide to effectively utilizing addEventListener for images

Is it possible to measure the width of an image loaded by user click in Javascript? I need the width in order to adjust the position of a button next to the image. Here is the code I am using: document.getElementById('preIMG').addEventListener( ...

javascriptcssaddeventlistener

Discovering the true width of elements that have overflow hidden in IE7 using jQuery

I am dealing with a dynamic list that contains around 50 elements, but the exact number may vary. <div style="width:465px;"> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa& ...

jquerycssinternet-explorer-7

The art of arranging React components

I'm struggling to organize my react components properly and I'm having difficulty with CSS Flexbox. Here are the 3 react components: function App() { return ( <> <div className = "header"> <h1>Connect ...

cssreactjsflexboxreact-component

Transform the radio selection into physical buttons with the Ruby on Rails Simple Form Gem

I've been struggling to achieve the desired layout when using the automatic wrappers generated by the Simple Form gem. I am working with Ruby on Rails and the Simple Form Gem, trying to create radio buttons with a specific design: https://i.sstatic.n ...

htmlruby-on-railsrubysimple-form

Resizing input fields with Bootstrap 4

Is there a way to make form elements stretch to the whole row width in Bootstrap 4? The current arrangement looks quite messy: http://prntscr.com/id6pfm Here is the HTML: <div class="jumbotron vertical-center"> <div class="container-flu ...

htmlcsstwitter-bootstrapbootstrap-4

Eliminating blank spaces below or above images when displayed horizontally

Displayed below is the image depicting my problem: I have discovered a cumbersome method to eliminate this unwanted whitespace by treating it as four separate lists and utilizing a complex for-loop to add elements. However, this approach limits the number ...

htmlcssimagelistwhitespace

The CSS file is being prevented from loading due to a MIME type mismatch error with the header X-Content-Type-Options set to

As I work on developing my Angular 4 app, I have been exploring ways to apply global styles. Following a helpful tutorial on the Angular site, I created a "styles.css" file in the root directory of my application and linked it in the index.html file: < ...

cssnode.jsangularexpressmime-types

Mistake made by the author while using the Google Structured Data Test

While reviewing my website, I encountered an error message stating: "Missing required hCard "author"" http://www.google.com/webmasters/tools/richsnippets?q=http%3A%2F%2Fwww.gamempire.it%2Fcastlestorm-ps-vita%2Frecensione%2F131419 Why is this happening? I ...

htmlmicrodatagoogle-search-consolemicroformatsrich-snippets

Is it possible for you to fix this HTML and PHP code for my Contact Form?

I am struggling with the Contact Form coding on my Dreamweaver CS6 website. Could someone please review my code and help me identify the issue? I believe the HTML is correct, but there seems to be an error in the PHP portion. HTML: <form action="ass ...

phphtmldreamweaver