[ANSWERED] html – Separate paragraphs not displaying on their own lines

Question 1

Here’s that code rewritten using Flexbox, it should achieve the behavior you want.

.wrap {
  width: 100%;
  display: flex;
  background: pink;
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
}

.col1,
.col2 {
  padding: 50px;
}

<div class="wrap">
  <div class="col1">
    <h1>I'm Centered</h1>
  </div>
  <div class="col2">
    <h1>I'm Centered Too</h1>
    <h1>I'm Centered Too</h1>
    <h1>I'm Centered Too</h1>
  </div>
</div>

Question 2

I didn’t apply a normal size text-center. I only applied it in mobile sizes. I guess this is what you want.

 .site-stats-group {
      background: pink;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      font-size: 2rem;
      flex-flow: row wrap;
    }

    @media screen and (max-width: 500px) {
        .site-stats-group {
          flex-direction: column;
        }
        .site-stat-info {
          text-align: center;
        }
    }

<div class="site-stats-wrap">
    <div class="site-stats-group">
      <div class="site-stat-title">
        <div class="site-stat-title-display">
          <p class="site-stats-title">Statistics</p>
        </div>
      </div>
      <div class="site-stat-info">
        <div class="site-stat-info-display">
          <p class="site-stat-title">Title</p>
          <p class="site-stat-subtitle">A Short Description</p>
        </div>
        <div class="site-stat-info-display">
          <p class="site-stat-title">Title</p>
          <p class="site-stat-subtitle">A Short Description</p>
        </div>
      </div>
    </div>
  </div>

Question 3

The CSS:

.container {
                width: 50%;
                margin: 0 auto;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
            }

            .left-side,
            .right-side {
                padding: 2rem;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .left-side {
                background-color: crimson;
            }

            .right-side {
                background-color: cornflowerblue;
            }

            @media screen and (max-width: 768px) {
                .container {
                    width: 100%;
                    grid-template-columns: 1fr;
                }
            }

The HTML:

<div class="container">
        <div class="left-side">
            <h1>Centered.</h1>
        </div>
        <div class="right-side">
            <div class="items">
                <h1>Centered.</h1>
                <h1>Centered.</h1>
                <h1>Centered.</h1>
            </div>
        </div>
    </div>

Question 4

Use flex and change the flex-direction to column in the media query for smaller screens:

html,
body {
  height: 100%;
  margin: 0;
}

.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  background: pink;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
}

.col1,
.col2 {
  box-sizing: border-box;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media only screen and (max-width: 500px) {
  .wrap {
    flex-direction: column;
  }
  .col1,
  .col2 {
    width: 100%;
    height: 50%;
  }
}

<div class="wrap">
  <div class="col1">
    <h1>I'm Centered</h1>
  </div>
  <div class="col2">
    <h1>I'm Centered Too</h1>
    <h1>I'm Centered Too</h1>
    <h1>I'm Centered Too</h1>
  </div>
</div>

Question 5

I’m trying to create a stats area for a site. On desktop it should be two across and on mobile it should be stacked. It would be nice if the content of the very inner DIV was stacked but I can’t figure out how to do this.

Desktop should look something like this

And mobile something like this

Here’s my code

.site-stats-wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: pink;
    margin-top: 10px;
    margin-bottom: 10px;
    
}

@media only screen and (max-width: 500px) {
.site-stats-wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: pink;
    margin-top: 15px;
    margin-bottom: 15px;
}
}

.site-stats-group {
    width: 100%;
    display: table;
}

.site-stat-title {
    width: 50%;
    float: left;
}

@media only screen and (max-width: 500px) {
.site-stat-title {
    width: 100%;
    float: left;
}
}

.site-stat-info {
    width: 50%;
    float: left;
}

@media only screen and (max-width: 500px) {
.site-stat-info {
    width: 100%;
    float: left;
}
}

.site-stat-title-display {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.site-stat-info-display {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.site-stat-title {
    font-family: 'Roboto', sans-serif;
    font-size: 35px;
    line-height: normal;
    margin: 0;
}

@media only screen and (max-width: 500px) {
.site-stat-title {
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
    line-height: normal;
    margin: 0;
}
}

.site-stat-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    line-height: normal;
    margin: 0;
}

@media only screen and (max-width: 500px) {
.site-stat-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: normal;
    margin: 0;
}
}

<div class="site-stats-wrap">
   <div class="site-stats-group">
      <div class="site-stat-title">
         <div class="site-stat-title-display">
             <p class="site-stats-title">Statistics</p>
         </div>
      </div>
      <div class="site-stat-info">
         <div class="site-stat-info-display">
            <p class="site-stat-title">Title</p>
            <p class="site-stat-subtitle">A Short Description</p>
            <br>
            <p class="site-stat-title">Title</p>
            <p class="site-stat-subtitle">A Short Description</p>
         </div>
      </div>
   </div>
</div>

The problems I’m facing now are
A) The contents of each column isn’t centered (they’d just take their height on mobile based on their contents but need to be the same height on desktop within the wrapper)
B) Text within the stats section doesn’t appear on its own line.

Any answers that center the contents and help with the text issue would be appreciated.

UPDATE
Based on Andrew Halpern‘s answer.

.wrap {
  width: 100%;
  display: flex;
  background: pink;
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
  text-align: center;
}

.col1 {
  width: 50%;
}

@media only screen and (max-width: 500px) {
.col1 {
  width: 100%;
}
}

.col2 {
  width: 50%;
}

@media only screen and (max-width: 500px) {
.col2 {
  width: 100%;
}
}

<div class="wrap">
  <div class="col1">
    <h1>I'm Centered</h1>
  </div>
  <div class="col2">
    <h1>I'm Centered Too</h1>
    <h1>I'm Centered Too</h1>
    <h1>I'm Centered Too</h1>
  </div>
</div>

Bollate

[ANSWERED] html – Separate paragraphs not displaying on their own lines

By

Solution 1 :

Solution 2 :

Solution 3 :

Solution 4 :

Problem :

Comments

Comment posted by css-tricks.com/snippets/css/a-guide-to-flexbox

Comment posted by Andrew Halpern

By

Related Post

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

[ANSWERED] javascript – How to handle repeating values in JQuery

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