Aligning Content Within A Feature Box
RicoKir
Hello, Concerning the element "Feature Box" Is it possible to align the " > " symbols at the bottom of the boxes evenly along the lower edge, as they are in boxes 2 and 3?
Robert Stelle
Accepted AnswerHi, yes, I see the problem. I overlooked the intermediate resolutions. I've reworked everything and it should work now.
Here's the final solution:
1.) in the "Custom CSS" field, change the code to:
.equal-box-row .sppb-addon-feature {
position: relative;
box-sizing: border-box;
}
.equal-box-row .sppb-addon-feature .sppb-btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}2.)Save your page and go to your template -> "System" -> "Site Template" and select your template. 3.)In the folder structure, go to the "js" folder and open the custom.js file (if it doesn't exist, create a new one). 4.) Insert the following code:
document.addEventListener("DOMContentLoaded", function() {
function equalBoxRow() {
document.querySelectorAll(".equal-box-row").forEach(row => {
const boxes = row.querySelectorAll(".sppb-addon-feature");
let maxH = 0;
boxes.forEach(b => {
b.style.minHeight = "auto";
const btn = b.querySelector(".sppb-btn");
if(btn) {
let btnH = btn.offsetHeight + 40;
b.style.paddingBottom = btnH + "px";
}
maxH = Math.max(maxH, b.offsetHeight);
});
boxes.forEach(b => b.style.minHeight = maxH + "px");
});
}
equalBoxRow();
window.addEventListener("resize", equalBoxRow);
});- Safe your changes. Now it should work in all resolutions and no longer duplicate :)
Ziaul Kabir
Accepted AnswerHello,
Thanks for reaching out to us. Could you please share temporary administrator access to your Joomla backend? You can provide the credentials securely in the hidden content section. Also, please take a full backup of your site before we make any changes.
Once I have access, I’ll investigate further and see what’s causing the issue. Let me know once you’ve shared the details!
Best regards,
Robert Stelle
Accepted AnswerHi, i had the same problem with the FeatureBox addon and solved it with a fixed size (height). This behavior of the addon is actually normal. The buttons are always loaded below the text element. The height is determined solely by the content. If a box has more text, the box becomes larger and the button automatically moves further down. If a box has short text, the box is smaller and the button sits "higher" than in the long box.
Here is a simple responsiv solution to fix this:
1.) Open your Page Builder page and click on the "Section Row" where you inserted the "FeatureBoxes."
2.) Go to the bottom of the Settings section on the right and enter a name in the "CSS Class" field, for example, "equal-box-row" (without the ").
3.) Below, in the "Custom CSS" field, simply paste the following code:
.equal-box-row .sppb-addon-content-align-after.sppb-addon-feature {
min-height: 600px; /* Adjust fixed height as needed, the height of the largest box */
display: flex;
flex-direction: column;
}
.equal-box-row .sppb-addon-content-align-after.sppb-addon-feature .sppb-addon-content {
flex: 1;
display: flex;
flex-direction: column;
}
.equal-box-row .sppb-addon-content-align-after.sppb-addon-feature .sppb-media-content {
flex: 1;
display: flex;
flex-direction: column;
}
/* Button positioned down and centered */
.equal-box-row .sppb-addon-feature .sppb-btn {
margin-top: auto;
align-self: center;
}
@media (max-width: 767px) {
.equal-box-row .sppb-addon-content-align-after.sppb-addon-feature {
min-height: auto; /* no fixed height on mobile */
}
}4.) Save your Page :)
RicoKir
Accepted AnswerHi both of you,
Thank you for the first step. It works up to a horizontal resolution of 1200px. At smaller resolutions, the boxes are duplicated – a copy below the original, and the button formatting evenly across the bottom no longer works.
