CODEWITHSUNDEEP
htmlcssformsstylesbulma
tulip
tulip

Reputation: 3

how to align text in two columns in bulma?

I have a page of two columns. On the left I have a form and on the right I have only text. what I need to do is align the text with the form labels.
I tried doing so by adjusting line height and padding and margin, however it appeared fine in chrome but was totally off in other browsers. Any suggestions on how to do it?
Here is how it looks right now: enter image description here

<head>
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
 <style>
    @media  (min-width: 1000px) and (max-width: 1215px) {
     h1{
         font-size:1.4rem !important;
     }
     p{
         font-size:1.1rem !important;
     }
 }
 @media (min-width: 1216px) and (max-width: 1407px){ 
     h1{
         font-size:1.6rem !important;
     }
     p{
         font-size:1.15rem !important;
     }
 }
 @media(min-width: 1408px) { 
     h1{
         font-size:1.7rem !important;
     }
     p{
         font-size:1.2rem !important;
    }
}
   </style>
  </head>
  <section class="hero is-fullheight">
        <div class="hero-body">
            <div class="container has-text-centered">

                <div class="columns is-8 is-variable ">

<div class="column is-half-desktop is-full-mobile has-text-left">
                    <div id="mc_embed_signup">
                <form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                        <div id="mc_embed_signup_scroll">

                    <div class="mc-field-group field">
                        <label class="label has-text-weight-bold" for="mce-EMAIL" dir="rtl" style="text-align: right;">البريد الإلكتروني <span class="asterisk">*</span>
                    </label>
                    <div class="control">
                        <input dir="auto" type="email" value="" name="EMAIL" class="input is-medium required email" id="mce-EMAIL">
                        </div>
                    </div>

                    <div class="mc-field-group field">
                        <label class="label has-text-weight-bold" for="mce-FNAME" dir="rtl" style="text-align: right;">الاسم الاول</label>
                        <div class="control">
                        <input dir="auto" type="text" value="" name="FNAME" class="input is-medium" id="mce-FNAME">
                        </div>
                    </div>

                    <div class="mc-field-group field">
                        <label class="label has-text-weight-bold" for="mce-LNAME" dir="rtl" style="text-align: right;">اسم العائلة </label>
                        <div class="control">
                        <input dir="auto" type="text" value="" name="LNAME" class="input is-medium" id="mce-LNAME">
                        </div>
    </div>
    
 </div>
</form>
    </div>
</div>
    <div class="column is-half-desktop has-text-right">

<br>
        <p class="has-text-justified" dir="rtl">هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها.  </p><br>
        <p class="has-text-justified"   dir="rtl"> ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر</p><br>
        <p class="has-text-justified"   dir="rtl">خلافاَ للإعتقاد السائد فإن لوريم إيبسوم ليس نصاَ عشوائياً، بل إن له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، .</p><br>
        </div>
</div>
</section>

Upvotes: 0

Views: 348

Answers (1)

dom_ahdigital
dom_ahdigital

Reputation: 1681

I would use a 3 column containers to align each field and it's text. Also, I swapped out your inline text alignment styles for Bulma's built in helper classes.

<head>
  <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  <style>
    @media (min-width: 1000px) and (max-width: 1215px) {
      h1 {
        font-size: 1.4rem !important;
      }

      p {
        font-size: 1.1rem !important;
      }
    }

    @media (min-width: 1216px) and (max-width: 1407px) {
      h1 {
        font-size: 1.6rem !important;
      }

      p {
        font-size: 1.15rem !important;
      }
    }

    @media(min-width: 1408px) {
      h1 {
        font-size: 1.7rem !important;
      }

      p {
        font-size: 1.2rem !important;
      }
    }
    
    #mc_embed_signup .mc-field-group {
      width: 100%;
    }
  </style>
</head>

<section class="hero is-fullheight">
  <div class="hero-body">
    <div class="container has-text-centered">
      <div id="mc_embed_signup">
        <form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
          <div id="mc_embed_signup_scroll">
            <div class="columns">
              <div class="column is-6">
                <div class="mc-field-group field">
                  <label class="label has-text-weight-bold has-text-right" for="mce-EMAIL" dir="rtl">البريد الإلكتروني <span class="asterisk">*</span>
                  </label>
                  <div class="control">
                    <input dir="auto" type="email" value="" name="EMAIL" class="input is-medium required email" id="mce-EMAIL">
                  </div>
                </div>
              </div>
              <div class="column is-6 is-flex is-align-items-center">
                <p class="has-text-justified" dir="rtl">هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. </p>
              </div>
            </div>
            <div class="columns">
              <div class="column is-6">
                <div class="mc-field-group field">
                  <label class="label has-text-weight-bold has-text-right" for="mce-FNAME" dir="rtl">الاسم الاول</label>
                  <div class="control">
                    <input dir="auto" type="text" value="" name="FNAME" class="input is-medium" id="mce-FNAME">
                  </div>
                </div>
              </div>
              <div class="column is-6 is-flex is-align-items-center">
                <p class="has-text-justified" dir="rtl"> ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر</p>
              </div>
            </div>
            <div class="columns">
              <div class="column is-6">
                <div class="mc-field-group field">
                  <label class="label has-text-weight-bold has-text-right" for="mce-LNAME" dir="rtl">اسم العائلة </label>
                  <div class="control">
                    <input dir="auto" type="text" value="" name="LNAME" class="input is-medium" id="mce-LNAME">
                  </div>
                </div>
              </div>
              <div class="column is-6 is-flex is-align-items-center">
                <p class="has-text-justified" dir="rtl">خلافاَ للإعتقاد السائد فإن لوريم إيبسوم ليس نصاَ عشوائياً، بل إن له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، .</p>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Related Questions