[ANSWERED] html – Aligning items in a div to horizontal on larger devices and vertical on smaller devices, with Bootstrap?

Question 1

I think you are looking to display your content in a row rather than a column. Using flex, simply add all your display items into div child elements. Flex by default aligns horizontally so there is no need to define a direction unless you are changing the direction. So the h2 and divs that hold the smaller text can live in a div, then the parent div should have the flex display and you can add any other flex properties to the parent element.

So on the parent class, I added display: flex; justify-content: space-around; align-content: center;. I also added p tags instead of divs as this will help to reduce any confusion in your html.

Note that by adding the class to the parent, you can reference the parent element and any of its children using CSS, this allows me to affect multiple elements with one block of code. Example .parent h2 or .parent p. the HTML looks much cleaner.

As to the responsiveness with flex… the flex value is an alternative to block elements floated and manipulated using media queries. Instead, developers can build a flexible container, flexbox for short. It’s great for mobile screens and responsive content for dynamic layouts and webapps. Adding media queries in your CSS will allow your app/site to be more responsive. I suggest having a look at the following article on media queries by a well respected site called CSS Tricks, there are alot of media devices out there and building a responsive app/site will need thought out css to accommodate css media queries.

Let me know if this was not what you were looking to achieve.

* {
  margin: 0;
  padding: 0;
}

#main section div {
   color: rgb(255, 255, 255); 
   margin: 40px 0px; 
}

.parent {
  display: flex;
  justify-content: center;
  align-content: center;
}

.parent h2 {
  margin: 0px 0px 12px;
  line-height: 48px;
  font-size: 56px;
  font-weight: 500;
}

.parent p {
  line-height: 24px;
  font-size: 16px;
  opacity: 0.7;
}

@media (max-width:499px) {

  #main section div {    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  #main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .parent {
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }
}

<div id="main" style="background: rgb(22, 82, 240);">
  <section style="width: 100vw; padding: 24px">
    <div>
      <div class="parent">
        <div>
          <h2>$320B+
          </h2>
          <p>
            Total Volume Traded
          </p>
        </div>

        <div>
          <h2>
            100+
          </h2>
          <p>Countries supported
          </p>
        </div>

        <div>
          <h2>
            35M+
          </h2>
          <p>
            Verified users
          </p>
        </div>
      </div>
    </div>
  </section>
</div>

I also suggest separating your HTML and CSS. You have a lot of in line style that is repeating, use classes for this. You define the class once in your css file or style tag, then add the class to the class attribute in your HTML. Then if you need to change it, you’re only changing it once in your CSS.

Question 2

I’m creating a div with some information, in the same way that the Coinbase website uses, but I’m facing a problem with styles, because I wanted this div to be responsive, horizontally aligned on larger devices and vertically aligned on smaller devices, but I don’t know much about CSS, however, I believe that I need to use Flexbox, but I’m very new to what exactly to do

I would like this code to work exactly as it is on the Coinbase website. On larger devices the reproduction appears to be in rows, but on smaller devices it appears to be in columns, how do I do this? I use Bootstrap, is there no Bootstrap class that makes this easy?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container {
            background: dodgerblue;
        }

        .section {
            display: flex;
            flex-shrink: 0;
            width: 100%;
            max-width: 1180px;
            margin: 0px auto;
            padding: 24px;
        }

        .box {
            display: flex;
            flex: 1 1 auto;
            flex-direction: row;
            justify-content: center;
            color: rgb(255, 255, 255);
            margin: 40px 0px;
        }

        h2 {
            margin: 0px 0px 12px;
            line-height: 48px;
            font-size: 56px;
            font-weight: 500;
        }

        .divChild {
            line-height: 24px;
            font-size: 16px;
            opacity: 0.7;
        }

        .divChildBox {
            flex: 1 1 0%;
            text-align: center;
            flex: 1 1 0%;
            text-align: center;
            flex: 1 1 0%;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="container">
        <section class="section">
            <div class="box">
                <div class="divChildBox">
                    <h2>$320B+</h2>
                    <div class="divChild">Total Volume Traded</div>
                    <div class="divChildBox">
                        <h2>100+</h2>
                        <div class="divChild">Countries supported</div>
                        <div class="divChildBox">
                            <h2>35M+</h2>
                            <div class="divChild">Verified users</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

</body>

</html>

Bollate

[ANSWERED] html – Aligning items in a div to horizontal on larger devices and vertical on smaller devices, with Bootstrap?

By

Solution 1 :

Problem :

Comments

Comment posted by dale landry

Comment posted by dale landry

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate