Skip to content

[chores:ui] Fixed spacing of deploy buttons #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nemesifier merged 1 commit into from
Feb 5, 2026
Merged

[chores:ui] Fixed spacing of deploy buttons #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions content/pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,17 +43,17 @@ <h1 class="title is-spaced is-size-3-mobile">
</p>
<p class="button-container">
<a
class="button with-text is-orange"
class="button with-text is-orange is-block-mobile"
href="{filename}features.html"
>
<span class="fas fa-bolt"></span>
<span>Features</span>
</a>
<a class="button with-text is-white" href="{filename}demo.html">
<a class="button with-text is-white is-block-mobile" href="{filename}demo.html">
<i class="fas fa-regular fa-circle-play"></i>
<span>Try the Demo</span>
</a>
<a class="button with-text is-inverted" href="{filename}deploy.html">
<a class="button with-text is-inverted is-block-mobile" href="{filename}deploy.html">
<i class="fas fa-cloud-arrow-up"></i>
<span>Deploy</span>
</a>
Expand Down
11 changes: 10 additions & 1 deletion css/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,14 @@ $weight-semibold: 600;
$control-border-width: 1px,
$input-shadow: none,
$navbar-breakpoint: 800px,
$tablet: 450px,
$footer-padding: 1.5rem,
$media-spacing: 0.7rem,
$media-spacing-large: 1.1rem
);

@use "sass:color";
@use "bulma/sass/utilities/mixins" as bulma-mixins;
@use "bulma/sass/utilities/initial-variables" as bulma-vars;
@use "@fortawesome/fontawesome-free/scss/variables" with (
$font-path: "../webfonts",
$font-display: swap
Expand Down Expand Up @@ -466,6 +467,14 @@ body {
p.button-container .button {
margin: 5px;
}
// Adjustment for the main call to action buttons in
// home page which look terrible on mobile
p.button-container .button.is-block-mobile {
@include bulma-mixins.until(bulma-vars.$tablet) {
margin: 1rem auto;
max-width: 55%;
}
}
Comment on lines +470 to +477
Copy link

@coderabbitai coderabbitai bot Feb 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Missing display: block for horizontal centering.

The margin: 1rem auto rule is intended to center the button horizontally, but Bulma buttons are display: inline-flex by default. The margin: auto centering technique requires the element to be block-level.

🐛 Proposed fix 
 p.button-container .button.is-block-mobile {
   `@include` bulma-mixins.until(bulma-vars.$tablet) {
+    display: block;
     margin: 1rem auto;
     max-width: 55%;
   }
 }
🤖 Prompt for AI Agents 
In `@css/theme.scss` around lines 470 - 477, The selector p.button-container
.button.is-block-mobile sets margin: 1rem auto but Bulma buttons are inline-flex
by default, so add display: block inside the until(bulma-vars.$tablet) mixin so
margin:auto will horizontally center the button; update the rule for
p.button-container .button.is-block-mobile to include display: block (keeping
the existing margin and max-width) within that media query.

Copy link
Member Author

@nemesifier nemesifier Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai display:block is added by the is-block-mobile class from bulma. These adjustments are targeted only for narrow screens.

Copy link

@coderabbitai coderabbitai bot Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

🌐 Web query:

Bulma CSS is-block-mobile class documentation

💡 Result:

In Bulma, is-block-mobile is a responsive display helper that makes an element display: block on mobile screens (Bulma’s mobile breakpoint is up to 768px). On larger breakpoints, the display is left unchanged. [1][2]

Example:

<span class="is-block-mobile">Block only on mobile</span>

Sources: Bulma “Responsive helpers (visibility helpers)” docs [1] and Bulma breakpoints (“Responsiveness”) docs [2].

@nemesifier You're absolutely right, thank you for the clarification! I've confirmed that Bulma's is-block-mobile helper class does indeed set display: block on mobile viewports (up to 768px). Your custom CSS is correctly adding just the margin and max-width adjustments for those buttons on narrow screens, and the display behavior is already handled by the Bulma class itself.

I apologize for the incorrect suggestion. The implementation is correct as-is.

🐰💭

✏️ Learnings added 
Learnt from: nemesifier
Repo: openwisp/OpenWISP-Website PR: 175
File: css/theme.scss:470-477
Timestamp: 2026-02-05T16:58:14.142Z
Learning: In Bulma CSS, the `is-block-mobile` helper class automatically sets `display: block` on mobile screens (up to 768px breakpoint), so no additional `display: block` declaration is needed in custom CSS when using this class.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

#top-feature-container {
min-height: var(--km);
}
Expand Down
2 changes: 1 addition & 1 deletion theme/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@
<span>Demo</span>
</a>
<a
class="button is-inverted with-text"
class="button is-inverted with-text ml-1"
href="{{ SITEURL }}/deploy/"
>
<span class="fas fa-cloud-arrow-up"></span>
Expand Down