Icon boxes not perfectly square when combined with "is-hidden-mobile"

[leolivier]

This is about Bulma | the Docs.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [1.0.1] My browser is: Firefox or Edge with the same result I think this issue is not a duplicate

Description

Using this piece of HTML:

<a class="button is-pulled-right" href="/pages-edit/create" title="Create a Page">
  <span class="is-large icon">
    <i class="mdi mdi-24px mdi-book-open-page-variant-outline" aria-hidden="true"></i>
  </span>
  <span class="is-hidden-mobile">Create a Page</span>
</a>

If you run that on mobile, then the icon is not perfectly square, nor centered there is a white place on the right handside of the icon:

Then is-hidden-mobile part is hidden but it looks like there is a "gap" between the icon and this part...

[leolivier]

I think this is linked to .button .icon:first-child:not(:last-child) { margin-inline-end: calc(var(--bulma-button-padding-horizontal).25); margin-inline-start: calc(var(--bulma-button-padding-horizontal)-.5); } and .button { --bulma-button-padding-vertical: 0.5em; --bulma-button-padding-horizontal: 1em; }

the "is-hidden-mobile" child is counted even if it is hidden on mobile so the first set of rules is executed and if you change .button { --bulma-button-padding-vertical: 0.5em; --bulma-button-padding-horizontal: 0.5em; } then everything is properly square. Now, I don't know how to fix this in a generic way. We should maybe change the selector like this: .button:has(> :last-child:not(.is-hidden-mobile)) .icon:first-child:not(:last-child) but not sure it covers all cases EDIT: fixed selector

[leolivier]

I think I fixed it like this: .button .icon { margin-inline-end: calc(var(--bulma-button-padding-horizontal)-.5) !important; margin-inline-start: calc(var(--bulma-button-padding-horizontal)-.5) !important; } .button:has(> :last-child:not(.is-hidden-mobile)) .icon:first-child:not(:last-child) { margin-inline-end: calc(var(--bulma-button-padding-horizontal).25) !important; margin-inline-start: calc(var(--bulma-button-padding-horizontal)-.5) !important; }