[chores:ui] Fixed spacing of deploy buttons#175
Conversation
WalkthroughThis pull request adds responsive mobile styling to button elements across the website. Three buttons (Features, Try the Demo, and Deploy) receive the Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@css/theme.scss`:
- Around line 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.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
content/pages/index.htmlcss/theme.scsstheme/templates/base.html
🔇 Additional comments (3)
theme/templates/base.html (1)
163-169: LGTM!The
ml-1Bulma utility class correctly adds left margin to separate the Deploy button from the Demo button in the header navigation.css/theme.scss (1)
78-79: LGTM!The Bulma utility imports are correctly namespaced and properly placed after the main Bulma import. These enable the responsive mixin usage below.
content/pages/index.html (1)
44-60: LGTM!The
is-block-mobileclass is consistently applied to all three call-to-action buttons within thebutton-container, enabling the responsive mobile styling defined in the SCSS.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| // 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%; | ||
| } | ||
| } |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
@coderabbitai display:block is added by the is-block-mobile class from bulma. These adjustments are targeted only for narrow screens.
There was a problem hiding this comment.
🧩 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.
1 participant
Fixed spacing of deploy buttons.