Search code examples
htmlcssbulma

Image as columns are taking a huge vertical space

I am new to web development and am trying to make things work with Bulma CSS.

I want to show five image icons which are links to my public profile. I want those icons to come in a single row, preferably covering the whole screen for bigger screens (with start and end padding of course), and for smaller screens, I would have them in rather two or three rows (and three or two icons per row).

So far I have been able to achieve most of this using Bulma columns. For desktops, the icons are coming in a row, not as a chain covering all the area, but in the center of row. For mobile, it is working as intended: two rows of icon covering the whole screen width, each row having three icons. It is not the best, but it would work.

The current output and its code look something like this:

Output

Enter image description here

Code

<section class="hero is-light">
    <div class="hero-body">

        <h3 class="title is-h3">Important links.</h3>


        <div class="columns is-mobile is-multiline is-centered">
            <a href="link" class="column is-narrow">                 <img src="assets/img/home/email.png"     class="image is-1by1"  height="64" width="64" alt="gmail">     </a>
            <a href="link" class="column is-narrow"> <img src="assets/img/home/linkedin.png"  class="image is-1by1"  height="64" width="64" alt="linkedin">  </a>
            <a href="link" class="column is-narrow">                         <img src="assets/img/home/github.png"    class="image is-1by1"  height="64" width="64" alt="github">    </a>
            <a href="link" class="column is-narrow">         <img src="assets/img/home/medium.png"    class="image is-1by1"  height="64" width="64" alt="medium">    </a>
            <a href="link" class="column is-narrow">                        <img src="assets/img/home/twitter.png"   class="image is-1by1"  height="64" width="64" alt="gmail">     </a>
        </div>


        <div class="columns"><a href="" class="column"> </a></div><!-- empty column group for space -->

        <div class="columns is-mobile is-multiline is-centered">
           <a href="link" class="button is-primary"> Download My Resume . </a>
        </div>

    </div>
  </section>
  1. My problem is the space between title "Important links" and the icons. Why is there such a huge vertical space in between them? How can I reduce it?
  2. I would also like to know if there is a possibility to show these icons as equally spaced and covering the whole width for large screens; while doing the current multi line behavior for smaller screens.
  3. It would also suit me, if all the three things (the title, the images and the download button) show in the same row for large screen (like: the title at the start, the icons in the centre and and the button at end) and the current solution for small screen. I guess it would be possible via nav, but I am not sure if we should have a footer represented by a nav and its associated classes. Maybe a grid could be applied here too?

Note: I would prefer a Bulma CSS solution with no JavaScript/vanilla CSS, but let me know if it isn't possible.

Solution

  • The is-h3 element has a 24 pixels bottom margin, and the .columns element also has a margin, and these add up. You are going to need to write some CSS to remove this margin:

    .title { margin: 0; }
.columns {margin: 0; }

    (You should probably give them unique selectors instead of changing all title and columns.)