Question 44091 in Html Question posted in
Some basic documentation can be found here.

How to make text evenly spaced apart in a div – Html

Text is not evenly spaced apart

I would like the 3 groups of text:
To be evenly spaced apart over the image.
Not overflow past the image when the page is reduced in width.

Does anyone have any ideas, please?

The image is placed inside a flexbox.
I have tried adding top % to the code, however, when I reduce the page width, the text then overflows the image, as shown.

This is my HTML code:

<!-- mountain background -->
<div class="container">
  <div class="item2">
    <h2 class="mtn1">A 44-letter alphabet.</h2>
    <h2 class="mtn2">
      A phonetically <br />
      consistent language.
    </h2>
    <h2 class="mtn3">
      A determined teacher <br />
      you can count on
    </h2>
    <img
      class="img4"
      src="pictures/output-onlinepngtools.png"
      alt=""
      style="width: 100%"
    />
  </div>
  <!-- mountain end -->
</div>

This is my CSS code:

/* mountain photo */
.img4 {
  height: auto;
  width: 100%;
  min-height: 400px;
}

.container {
  width: 100vw;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}

.item2 {
  width: 100vw;
}

.mtn1 {
  float: left;
  text-align: left;
  position: absolute;
  top: 46%;
  font-family: "LiberationSansRegular";
  font-style: normal;
  font-size: 70px;
}

.mtn2 {
  float: left;
  text-align: left;
  position: absolute;
  top: 65%;
  font-family: "LiberationSansRegular";
  font-style: normal;
  font-size: 70px;
}

.mtn3 {
  float: left;
  text-align: left;
  position: absolute;
  top: 85%;
  font-family: "LiberationSansRegular";
  font-style: normal;
  font-size: 70px;
}
Tags:

2

Answers


  1. 0

    This is a more minimalistic approach, just to show how it works:
    Only one class, and two attributes needed.

    .parent {
  display: flex;
  flex-direction: column;
}
    <div class="parent">
  <p>This</p>
  <p>is evenly</p>
  <p>spaced content</p>
  <p>with minimal</p>
  <p>styling</p>
</div>

    if you want a specific distance you have two approaches.
    You either set a height on the parent, or you set gap: 25px; if you want a spacing of 25px. Remember that some elements have margin/paddings, that might interfere, so you will have to either remove those or take them into account.

    If you want the text to adjust its size, I think you are best off with a media query. This will be in relation to the window however, and not the size of the box/parent.
    So you could use percentages… and play around to see if you find a size that fits what you need.

    Login or Signup to reply.
  2. 0

    You do not need flex box for this.
    You can work it out with background-image.

    /* mountain photo */
.img4 {
  height: auto;
  width: 100%;
  min-height: 400px;
}

.container {
  width: 100vw;
  background-image: url('https://cdn.pixabay.com/photo/2016/11/23/13/48/beach-1852945_960_720.jpg');
  background-attachment: fixed;
  overflow: scroll;
}

.item2 {
  width: 100vw;
}

.mtn1 {
  font-family: "LiberationSansRegular";
  font-style: normal;
  font-size: 70px;
}

.mtn2 {
  font-family: "LiberationSansRegular";
  font-style: normal;
  font-size: 70px;
}

.mtn3 {
  font-family: "LiberationSansRegular";
  font-style: normal;
  font-size: 70px;
}
    <!-- mountain background -->
<div class="container">
  <div class="item2">
    <h2 class="mtn1">A 44-letter alphabet.</h2>
    <h2 class="mtn2">
      A phonetically <br />
      consistent language.
    </h2>
    <h2 class="mtn3">
      A determined teacher <br />
      you can count on
    </h2>
  </div>
  <!-- mountain end -->
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search