Unwanted space in Bulma CSS box

user_16469477 0
Viewed 90

currently I'm working on bulma css frameworks. I'm making contact us page but some unwanted space is there. I tried a lot but don't know how to remove that? I just shared image of what is the problem below. This is Image

This is Code

<section class="p-5">
        <div class="columns is-desktop box has-background-grey-light m-0">
            <div class="column">
                <div class="has-text-centered">
                    <div class="box">
                        <span class="icon m-4">
                            <i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
                        </span>
                        <p class="is-size-5 has-text-weight-medium has-text-grey">Our Address</p>
                        <p class="m-2">A108 Adam Street, New York, NY 535022</p>
                    </div>
                    <div class="columns is-desktop m-0">
                        <div class="column box">
                            <span class="icon m-4">
                                <i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
                            </span>
                            <p class="is-size-5 has-text-weight-medium has-text-grey">Email Us</p>
                            <p class="m-2">info@example.com
                                contact@example.com</p>
                        </div>
                        <div class="column box ml-5">
                            <span class="icon m-4">
                                <i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
                            </span>
                            <p class="is-size-5 has-text-weight-medium has-text-grey">Call Us</p>
                            <p class="m-2">+1 5589 55488 55<br />
                                +1 6678 254445 41</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="box">

                </div>
            </div>
        </div>
    </section>
bulma tailwind-css css html javascript
1 Answers

try only with TailwindCSS like this,

<section class="flex w-full flex-col bg-gray-300 text-xl">
  <div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2">
    <img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
    <span class="font-bold">Our Address</span>
    <div class="flex flex-col md:flex-row items-center">
      <span> A108 Adam Street,</span>
      <span>New York, NY 535022</span>
    </div>
  </div>
  <div class="flex flex-col md:flex-row justify-around w-full">
    <div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2 w-auto md:w-full">
      <img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
      <span class="font-bold">Email Us</span>
      <span>info@example.com</span>
      <span>contact@example.com</span>
    </div>
    <div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2 w-auto md:w-full">
      <img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
      <span class="font-bold">Call Us</span>
      <span>+1 5589 55488 55</span>
      <span>+1 6678 254445 41</span>
    </div>
  </div>
</section>

Check on the Tailwind Play

user_46340600
Related