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

Use css to make line under text width the same for all on mobile view – Html

I want to line under the text to be the same size width for all. It needs to be uniform width (same size). The line under the ‘press’ and ‘phone’ needs to have the same width as the ‘questions’ line. Here is

enter image description here

I’ve tried adjusting the width, but nothing so far.

.contact-banner {
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  margin-top: 10%;
}

.contacts-info {
  display: flex;
  justify-content: space-around;
  margin-top: 2%;
  align-items: center;
}

h1 {
  display: flex;
  justify-content: center;
  font-family: var(--elewa-group-website-dmsans-regular);
  font-size: 50px;
  font-weight: 550;
}

p {
  margin: 5% 0;
  padding-bottom: 2%;
  border-bottom: 1px solid rgb(180, 175, 175);
}

h2 {
  font-family: var(--elewa-group-website-dmsans-regular);
  font-size: 13px;
  opacity: .4;
}

p {
  font-family: var(--elewa-group-website-dmsans-regular);
  font-size: 27px;
}

@media (max-width: 767px) {
  .banner-main {
    margin-top: 5%;
  }
  .contacts-info {
    flex-direction: column;
    align-items: center;
  }
  .questions-info,
  .press-info,
  .phone-info {
    margin: 5% 0;
  }
  .press-info,
  .phone-info {
    padding-top: 2%;
  }
  h1 {
    font-size: 35px;
  }
  h2 {
    font-size: 18px;
    width: 100%;
    text-align: center;
  }
  p {
    font-size: 20px;
    margin: 5% 0;
    padding-bottom: 2%;
    border-bottom: 1px solid rgb(180, 175, 175);
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .banner-main {
    margin-top: 4%;
  }
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 14px;
  }
  p {
    font-size: 25px;
    margin: 5% 0;
    padding-bottom: 2%;
    border-bottom: 1px solid rgb(180, 175, 175);
    box-sizing: border-box;
  }
}
<div class="contact-banner">
  <h1>Contact</h1>
  <div class="contacts-info">
    <div class="questions-info">
      <h2 class="subheader">Questions</h2>
      <p>[email protected]</p>
    </div>
    <div class="press-info">
      <h2 class="subheader">Press</h2>
      <p>[email protected]</p>
    </div>
    <div class="phone-info">
      <h2 class="subheader">Phone</h2>
      <p>+254 78 92 27 755</p>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    To have the same width, set the border-bottom on the parent div instead of the p tag like so :

    .questions-info{
    border-bottom: 1px solid rgb(180, 175, 175);
}
.press-info{
    border-bottom: 1px solid rgb(180, 175, 175);
}

.phone-info{
    border-bottom: 1px solid rgb(180, 175, 175);
}
    Login or Signup to reply.
  2. 0

    Stretch the flex children and align text to center for them and the wrapper element. Also use inline-flex on the inner container.

    .contact-banner {
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  margin-top: 10%;
  text-align: center;
}

.contacts-info {
  display: flex;
  justify-content: space-around;
  margin-top: 2%;
  align-items: center;
}

h1 {
  display: flex;
  justify-content: center;
  font-family: var(--elewa-group-website-dmsans-regular);
  font-size: 50px;
  font-weight: 550;
}

p {
  margin: 5% 0;
  padding-bottom: 2%;
  border-bottom: 1px solid rgb(180, 175, 175);
}

h2 {
  font-family: var(--elewa-group-website-dmsans-regular);
  font-size: 13px;
  opacity: .4;
}

p {
  font-family: var(--elewa-group-website-dmsans-regular);
  font-size: 27px;
}

@media (max-width: 767px) {
  .banner-main {
    margin-top: 5%;
  }
  .contacts-info {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .questions-info,
  .press-info,
  .phone-info {
    margin: 5% 0;
  }
  .press-info,
  .phone-info {
    padding-top: 2%;
  }
  h1 {
    font-size: 35px;
  }
  h2 {
    font-size: 18px;
    width: 100%;
    text-align: center;
  }
  p {
    font-size: 20px;
    margin: 5% 0;
    padding-bottom: 2%;
    border-bottom: 1px solid rgb(180, 175, 175);
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .banner-main {
    margin-top: 4%;
  }
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 14px;
  }
  p {
    font-size: 25px;
    margin: 5% 0;
    padding-bottom: 2%;
    border-bottom: 1px solid rgb(180, 175, 175);
    box-sizing: border-box;
  }
}
    <div class="contact-banner">
  <h1>Contact</h1>

  <div class="contacts-info">
    <div class="questions-info">
      <h2 class="subheader">Questions</h2>
      <p>[email protected]</p>
    </div>

    <div class="press-info">
      <h2 class="subheader">Press</h2>
      <p>[email protected]</p>
    </div>

    <div class="phone-info">
      <h2 class="subheader">Phone</h2>
      <p>+254 78 92 27 755</p>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search