CODEWITHSUNDEEP
htmlcss
mr_muscle
mr_muscle

Reputation: 2900

CSS styling text to get margins

I'm very fresh in CSS but I want to achieve styling like below:

enter image description here

I'm just wondering how to get this text location inside the arrows. It's not a text-align but some kind of combination of that and something else.

My code:

<div class="message-container">
  <div>
    <h1>Hi there,</h1>
    <p class="welcome-message">Thank you for signing up!</p>
  </div>
  <hr class="hr1">
  <p>
    You have successfully signed up to Every Health!<br>
    You can start with your journey at Every right now.
  </p>
  <hr class="hr2">
  <h2>Your account:</h2>
  <div class="account-details">
    <p>
      Username: <%= @account.name %><br>
      Email: <%= @account.email %>
    </p>
  </div>
</div>

css:

  h1 {
    color: #0C0C0D;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 33px;
    margin-bottom: -3px;
    text-align:center;
  }
  hr {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
  }
  .hr1{
    margin: 30px 0;
  }
  .hr2{
    margin: 20px  0 0 0;
  }
  p {
    line-height: 20px;
    font-size: 16px;
    text-align:justify;
  }
  .message-container {
    margin: auto;
    width: 50%;
    padding: 10px;
  }
  .account-details {
    text-align: center;
  }
  .welcome-message {
    text-align: center;
  }

But this is not what I expected:

enter image description here

Upvotes: 0

Views: 101

Answers (3)

CanUver
CanUver

Reputation: 1774

If I wanted to build a structure like this, I wouldn't use "hr." Because the length of posts can vary and you'll have to readjust for each size (tablet, phone). For such a structure, the flexbox structure may be a more stable and more useful method.

I also suggest you be careful when using padding for writing. Apply padding or margin thinking about your next step. Because you're going to have to write logical and short codes for each dimension. You will have to change each padding and margin value when the page content increases much more in the future. With this size of the text, even if it looks good, if the text is shorter or longer, you will have to renew the padding and margin values every time.

h1 {
  color: #0C0C0D;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 33px;
  margin-bottom: -3px;
  text-align: center;
}

hr {
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

p {
  line-height: 20px;
  font-size: 16px;
  text-align: justify;
}

.message-container {
  margin: auto;
  width: 50%;
  padding: 10px;
}

.welcome-message {
  text-align: center;
}

.message-info {
  border: 1px solid black;
  border-left: 0;
  border-right: 0;
  display: flex;
  justify-content: center;
}

.account-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.account-container h2 {
  margin-bottom: 0;
}
<div class="message-container">
  <div class="message-container-first">
    <h1>Hi there,</h1>
    <p class="welcome-message">Thank you for signing up!</p>
  </div>
  <div class="message-container-second">
    <div class="message-info">
      <p>
        You have successfully signed up to Every Health!<br> You can start with your journey at Every right now.
      </p>
    </div>
    <div class="account-container">
      <h2>Your account:</h2>
      <p style="text-align: center;">
        Username:
        <%= @account.name %><br> Email:
          <%= @account.email %>
      </p>
    </div>
  </div>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67758

Erase or reduce the left/right margins of the .message-container and add padding: 0 25%; (i.e. 25% padding left and right) to p, h2 and all other elements which should be affected:

.message-container {
  width: 90%;
  margin: 0 auto;
}

h1 {
  color: #0C0C0D;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 33px;
  margin-bottom: -3px;
  text-align: center;
}

hr {
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

.hr1 {
  margin: 30px 0;
}

.hr2 {
  margin: 20px 0 0 0;
}

h2 {
  padding: 0 25%;
}

p {
  line-height: 20px;
  font-size: 16px;
  text-align: justify;
  padding: 0 25%;
}

.account-details {
  text-align: center;
}

.welcome-message {
  text-align: center;
}
<div class="message-container">
  <div>
    <h1>Hi there,</h1>
    <p class="welcome-message">Thank you for signing up!</p>
  </div>
  <hr class="hr1">
  <p>
    You have successfully signed up to Every Health!<br> You can start with your journey at Every right now.
  </p>
  <hr class="hr2">
  <h2>Your account:</h2>
  <div class="account-details">
    <p>
      Username:
      <%= @account.name %><br> Email:
        <%= @account.email %>
    </p>
  </div>
</div>

Upvotes: 2

ray
ray

Reputation: 27245

As with everything else in CSS, there are many ways to accomplish the same thing. Here's one way:

Give everything inside .message-container that isn't an <hr> a max-width, and center it using margins:

  .message-container > *:not(hr) {
    max-width: 250px;
    margin: 0 auto;
  }

The width I chose (250px) is fairly arbitrary. Feel free to adjust it to your liking, obviously.

One advantage to this approach over setting explicit padding is that this will adapt well to narrow screens, reducing the inset instead of reducing the space the text itself occupies.

(I also set text-align: left on the p because justified text in a narrow column looks janky.)

h1 {
    color: #0C0C0D;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 33px;
    margin-bottom: -3px;
    text-align:center;
  }
  hr {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
  }
  .hr1{
    margin: 30px 0;
  }
  .hr2{
    margin: 20px  0 0 0;
  }
  p {
    line-height: 20px;
    font-size: 16px;
    text-align: left;
  }
  .message-container {
    margin: auto;
    width: 50%;
    padding: 10px;
  }
  
  /* new rule */
  .message-container > *:not(hr) {
    max-width: 250px;
    margin: 0 auto;
  }
  
  .account-details {
    text-align: center;
  }
  .welcome-message {
    text-align: center;
  }
<div class="message-container">
  <div>
    <h1>Hi there,</h1>
    <p class="welcome-message">Thank you for signing up!</p>
  </div>
  <hr class="hr1">
  <p>
    You have successfully signed up to Every Health!<br>
    You can start with your journey at Every right now.
  </p>
  <hr class="hr2">
  <h2>Your account:</h2>
  <div class="account-details">
    <p>
      Username: <%= @account.name %><br>
      Email: <%= @account.email %>
    </p>
  </div>
</div>

Upvotes: 0

Related Questions