A. section class attribute has a missing quote symbol ” .
Change it from: <section class="section is-paddingless> To: <section class="section is-paddingless">
B. Add is-marginless class to the section’s child div.
Final html:
<section class="section is-paddingless">
<div class="columns is-vcentered has-background-primary is-marginless" style="height: 100vh">
<div class="column is-4 is-flex">
<div class="container">Sample text</div>
</div>
</div>
</section>
I need help with my css. I wanted the background to take up the entire viewport using 100vh but it’s not working. The meta tag for the viewport is already included. The box-sizing is already set up as well. When I tried inspecting the page using the chrome dev tool, there seems to be no margin or padding creating the space below. BTW I’m using Bulma CSS.
<section class="section is-paddingless>
<div class="columns is-vcentered has-background-primary" style="height: 100vh">
<div class="column is-4 is-flex">
<div class="container">Sample text</div>
</div>
</div>
</section>
It would be helpful for others who come across this question if you could edit the question with the code you provided in your comment.
@GiddharthSupta I tried it just now. It didn’t work. The blank space below still exists.
This worked. Thanks! Could you please explain howadding the class “is-marginless” worked? There seems to be no margin when I inspected the div with the class “columns”.
Colums indeed have margins: .columns:last-child { margin-bottom: -.75rem; } .columns { margin-left: -.75rem; margin-right: -.75rem; margin-top: -.75rem; } Here, margin-top seems to be dominant and therefore, the div is pulled upwards.
