A user wants to apply an 8:1 aspect ratio to rich text buttons for custom shapes but their initial CSS code isn’t working.
The Problem:
The original code used button as a tag selector instead of the correct class .button, causing it to fail.
Solutions Provided:
Corrected selector: Change .rich-text__buttons button to .rich-text__buttons .button with aspect-ratio: 8 / 1 and width: 100%
Remove conflicting styles: Ensure no fixed height or large padding values override the aspect ratio; use padding: 0 and display: flex with centering properties
Target both links and buttons: Apply styles to both .rich-text__buttons a and .rich-text__buttons button, and nest a span wrapper with flexbox centering to keep text aligned
Multiple contributors offered CSS snippets with similar approaches—removing fixed dimensions and relying on aspect-ratio while centering content with flexbox. The discussion remains open with no confirmation from the original poster on which solution worked.
Hello, I would like to make my rich text buttons a certain aspect ratio (8:1) because i am making them custom shapes. How do I go about doing this? I have already tried this code (below) but it did nothing.
.rich-text__buttons button {
aspect-ratio: 8 / 1 !important; /* width : height */
width: 100% !important;
}
PW: ellaella
Hi @ellacoker ,
You’ve used the wrong class name — you’re using a tag name instead of a class selector.
Please update it to the code below:
.rich-text__buttons .button {
aspect-ratio: 8 / 1 !important; /* width : height */
width: 100% !important;
}
Hi there,
You can keep your rich text buttons at a perfect 8:1 aspect ratio by removing fixed paddings/heights and letting CSS handle the ratio. For example:
.rich-text__buttons button {
aspect-ratio: 8 / 1;
width: 100%;
max-width: 400px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-sizing: border-box;
}
Make sure no other CSS in your theme sets a fixed height or large padding for the button, as that can override the aspect ratio.
At Tipo, we can also help you fine-tune this for all screen sizes so your custom-shaped buttons look consistent everywhere.
— Sinh, Developer at Tipo
/* Rich Text buttons aspect ratio fix /
.rich-text__buttons a,
.rich-text__buttons button {
display: inline-block !important;
aspect-ratio: 8 / 1 !important; / width : height /
width: auto !important; / change to 100% if you want full width */
height: auto !important;
line-height: normal !important;
padding: 0 !important;
}
/* Ensure the text inside stays centered */
.rich-text__buttons a span,
.rich-text__buttons button span {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}