Excess space within Bulma's CSS container

I am currently immersed in the world of Bulma CSS frameworks as I work on designing a contact us page. However, I have encountered a pesky issue with unwanted space that I cannot seem to eliminate, no matter how hard I try. To give you a better idea of the problem, I have uploaded an image below. View Image Here

Here is the code snippet:

<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"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0999e969fb09588919d809c95de939f9d">[email protected]</a>
                                <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2919d9c86939186b2978a939f829e97dc919d9f">[email protected]</a></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>

Answer №1

Experiment using only TailwindCSS in the following manner:

<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><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b9beb6bf90b5a8b1bda0bcb5feb3bfbd">[email protected]</a></span>
      <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2e2223392c2e390d28352c203d2128632e2220">[email protected]</a></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>

View the result on the Tailwind Play

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: AngularJS is experiencing an injector module error that has not been caught

I have set up an Angular boilerplate that includes various elements such as meta tags, CDN links, and script tags. However, I am encountering a persistent error in my console and cannot figure out the root cause of it. https://i.stack.imgur.com/qPGby.png ...

When the button is clicked, the JavaScript function is not being executed

I'm having a strange issue with my second button not working as expected. Despite appearing to be straightforward, the "Reset" button does not seem to be triggering the clear() function. Within the HTML code, I have two buttons set up to interact wit ...

What is the optimal location for storing JSON data while dynamically loading via AJAX?

Let's imagine a scenario where there is an HTML page hosting a dynamic modal box. Clicking on different links within the page triggers the modal to open, each showing different content based on the clicked link. The dialog contents are fetched using A ...

Learn how to convert data to lowercase using Vue.js 2

I am attempting to convert some data to lowercase (always lowercase) I am creating a search input like : <template id="search"> <div> <input type="text" v-model="search"> <li v-show="'hello'.includes(sea ...

Ways to interpret element values and choose the number of clicks

Currently, I am focusing on parsing elements where the tag might contain the word "example". Here is an example snippet of code that I am working with: <div class="stock-controller" style="transition: border-bottom 0.3s ease 0s, opacity 0.3s ease 0s;"& ...

Setting a port in Next.js: A step-by-step guide

I have one application currently running on port 3000 and I need to run another application on a different port in React Next.js. How can I make this change? In my package.json file, the current scripts section looks like this: "scripts": { & ...

Transitioning from AngularJS to Angular 2: Exploring Alternatives to $rootScope.$on

Our journey with the AngularJS project has begun on the path towards the modern Angular. The ngMigration utility advised me to eliminate all dependencies on $rootScope since Angular does not have a concept similar to $rootScope. While this is straightforw ...

How is it possible for a JavaScript variable sharing the same name as a div Id to automatically pass the div?

This is just ridiculous. Provided HTML <p id = "sampleText"></p> Javascript var sampleText = "Hello World!"; Execution console.log(sampleText); // prints <p id = "sampleText"></p> How is this even possible? I ...

Overlap bug with Flash content

In both Google Chrome (16.0.912.75 m) and Safari (5.1.1), I am encountering the well-known flash / html overlay issue. Despite setting the wmode attribute to transparent as suggested here and here, along with trying opaque, the problem persists. Following ...

Display a dropdown menu for ngx-chips when the input field is selected

Currently, I am utilizing ngx-chips to generate a tag input for Angular 8. While I have successfully set it up, I am interested in having the dropdown display whenever I focus on the tag itself. At present, the dropdown only appears when I focus on the inp ...

Surveillance software designed to keep tabs on how long visitors remain on external websites

My goal is to increase sign-ups on my website by providing users with a unique JavaScript snippet to add to their own sites. I have two specific questions: 1) If I implement the following code to track visit duration on external websites, how can I ensure ...

To maintain the width values (maximum width) when using overflow:auto, do not make any adjustments. (CSS for scrollbars

My English isn't the best and I'm just starting out with CSS. The scroll bar is taking up space and I want to prevent that from happening. I have noticed that when the scroll bar appears, it causes the fixed navigation menu bar to shift and the ...

Passing an array of items as a property to a child component in React with Typescript is not possible

In my project, I have multiple classes designed with create-react-app. I am trying to send an array of objects to child components as illustrated below. Items.tsx import * as React from 'react'; import ItemTable from './ItemTable'; imp ...

What steps can be taken to prompt the layout to transition?

I have an element that sticks to the top based on the current scroll offset. The issue is that the layout doesn't update when there is space available after the stuck element. This creates a ghost gap where the stuck element used to be... http://fidd ...

Sending JSON data in FetchAPI Response

I'm currently struggling with creating a Response object and I can't seem to figure out how to pass a JSON body into it. Do I need to generate a ReadableStream for this purpose? If so, what is the correct way to do it? I attempted the following ...

The Angular material checkbox has a mind of its own, deciding to uncheck

I am having an issue with a list displayed as checkboxes using angular-material (Angular 7). Below, I will provide the code snippets for both the .html and .ts files. Every time I click on a checkbox, it gets checked but then immediately becomes unchecked ...

Is nextJS SSR the optimal solution for handling undefined variables in the window object to enable optional chaining in cases where global variables are not supported?

When using (window?.innerHeight || 420) for server-side rendering (SSR), the translation would be (((_window = window) === null || _window === void 0 ? void 0 : _window.innerHeight) || 420) However, this could result in a referenceError: window is not d ...

The jQuery .ajax() GET request is causing issues in Firefox but is functioning properly in Chrome

I am currently utilizing a third-party API to incorporate certain services into an HTML form that I possess. For the API to work, it requires the validation of a hash value and timestamp for each request. These values expire after 30 minutes. To prevent e ...

NodeJS Like/Dislike System: Leveraging the Power of NodeJS

(Please refer to my solution in the answer post below) Hello there! Today, I have a question about implementing a like/dislike system using nodeJs with data stored in MongoDB. What is the current scenario? I'm tasked with creating the backend for ...

I need to retrieve the Instagram follower count for a specific user using JavaScript based on their user ID

I'm looking to design a form that allows users to input their Instagram ID and receive the exact number of followers without the "k" abbreviation. However, I am unsure how to achieve this. Any guidance on how to accomplish this would be greatly apprec ...