Html - How to make paragraph alignment responsive?

JohnReaper
August 27, 2023
151 views
0 votes
2 Answers

Web view

Mobile view

How to make paragraphs well structured when in mobile view. My problem is that when in mobile view the paragraphs are out of order. I attached a picture for the mobile display paragraph. Can anyone help me how to make paragraphs in mobile view arranged like in web view.

.flex-container {
  display: flex;
  margin-top: 2%;
  margin-left: 15%;
  margin-right: 10%;
  flex-direction: row;
}

.flex-item-left {
  background-color: #E9F1FF;
  padding: 10px;
  width: auto;
  flex: 50%;
}

.flex-item-right {
  background-color: #E9F1FF;
  padding: 10px;
  margin-right: 10%;
  width: auto;
  flex: 50%;
}

.paragraph {
  color: #0E71B0;
  font-family: Arial, Helvetica, sans-serif;
  width: auto;
  height: auto;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .flex-container {
    flex-direction: column;
  }
}

<div class="flex-item-right">
  <p class="paragraph" style="padding-top: 10%;">We understand the need for patients to have a better health care when they are going through their health journey.</p>
  <p class="paragraph" style="padding-top: 1%;">Anchored around cHEART patient app that keeps personal
    <br>health information (PHI), we have three (3) integrated <br> solutions to enable healthcare providers to provide <br> continuous care to their patients.</p>
  <p class="paragraph" style="padding-top: 1%;"><b>SIMPLE</b> - an on-demand emergency medical care for pre-
    <br>hospital service.
  </p>
  <p class="paragraph" style="padding-top: 1%;"><b>24 Health</b> - a personalised on-demand medical care at home <br>after being discharged from hospital.</p>
  <p class="paragraph" style="padding-top: 1%;"><b>EASY</b> - a digital solution for population health, catering to<br> the underserved community to help them screen and <br>maintain their health.</p>
  <a href="bookdemoform.html" target="popup">
    <button class="button2" style="  width: 120px; margin-left: 20px; "><b>Book a demo <br>
                    now</b></button>
  </a>
</div>

Tags: css html

Answers

First of all remove the ‘br’ tags.

Then add text-align: justify; to the .paragraph class

.flex-container {
  display: flex;
  margin-top: 2%;
  margin-left: 15%;
  margin-right: 10%;
  flex-direction: row;
}

.flex-item-left {
  background-color: #E9F1FF;
  padding: 10px;
  width: auto;
  flex: 50%;
}

.flex-item-right {
  background-color: #E9F1FF;
  padding: 10px;
  margin-right: 10%;
  width: auto;
  flex: 50%;
}

.paragraph {
  color: #0E71B0;
  font-family: Arial, Helvetica, sans-serif;
  width: auto;
  height: auto;
  line-height: 1.5;
  text-align: justify;
}

@media (max-width: 900px) {
  .flex-container {
    flex-direction: column;
  }
}

<div class="flex-item-right">
  <p class="paragraph" style="padding-top: 10%;">We understand the need for patients to have a better health care when they are going through their health journey.</p>
  <p class="paragraph" style="padding-top: 1%;">Anchored around cHEART patient app that keeps personal health information (PHI), we have three (3) integrated solutions to enable healthcare providers to provide continuous care to their patients. </p>
  <p class="paragraph" style="padding-top: 1%;">
    <b>SIMPLE</b> - an on-demand emergency medical care for pre-hospital service.
  </p>
  <p class="paragraph" style="padding-top: 1%;">
    <b>24 Health</b> - a personalised on-demand medical care at home after being discharged from hospital.
  </p>
  <p class="paragraph" style="padding-top: 1%;">
    <b>EASY</b> - a digital solution for population health, catering to the underserved community to help them screen and maintain their health.
  </p>
  <a href="bookdemoform.html" target="popup">
    <button class="button2" style="  width: 120px; margin-left: 20px; ">
      <b>Book a demo  now </b>
    </button>
  </a>
</div>

"Delete" <br> in @media (max-width: 900px), with your permission, I’ll just add this to your code…:

.flex-container {
    display: flex;
    margin-top: 2%;
    margin-left: 15%;
    margin-right: 10%;
    flex-direction: row;
    
  }
  
  .flex-item-left {
    background-color: #E9F1FF;
    padding: 10px;
    width: auto;
    flex: 50%;
  }
  
  .flex-item-right {
    background-color: #E9F1FF;
    padding: 10px;
    margin-right: 10%;
    width: auto;
    flex: 50%;
  }

.paragraph{
    color: #0E71B0;
    font-family: Arial, Helvetica, sans-serif;
    width: auto;
    height: auto;
    line-height: 1.5;
  }


 @media (max-width: 900px) {
    .flex-container {
      flex-direction: column;
    }
     /* 👇 */
     .paragraph br{
         content:' ';
     }
  }

<div class="flex-item-right" >
    <p class="paragraph" style="padding-top: 10%;">We understand the need for patients to have a better
        health care when they are going through their health journey.</p>
    <p class="paragraph" style="padding-top: 1%;">Anchored around cHEART patient app that keeps personal
        <br>health information (PHI), we have three (3) integrated <br>
        solutions to enable healthcare providers to provide <br> continuous care to their patients.</p>
    <p class="paragraph" style="padding-top: 1%;"><b>SIMPLE</b> - an on-demand emergency medical care for
        pre-<br>hospital
        service.</p>
    <p class="paragraph" style="padding-top: 1%;"><b>24 Health</b> - a personalised on-demand medical care at
        home <br>after
        being discharged from hospital.</p>
    <p class="paragraph" style="padding-top: 1%;"><b>EASY</b> - a digital solution for population health,
        catering to<br>
        the underserved community to help them screen and <br>maintain their health.</p>
    <a href="bookdemoform.html" target="popup">
        <button class="button2" style="  width: 120px; margin-left: 20px; "><b>Book a demo <br>
                now</b></button>
    </a>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to make paragraph alignment responsive?

Answers