Text splitting onto 2 lines when in windowed.

Hi how can I stop the "ruudi" text from splitting into two lines when it's in windowed mode? And keep the buttons from splitting into two lines if possible?

https://ranunculus-apple-mhyx.squarespace.com

Password: babeh

You try adding this to Design > Custom CSS

@media screen and (min-width:901px) and (max-width:1200px) {
div#block-e6db60e62e97f379fba4 h4 {
    font-size: 38px !Important;
}
}

Making button text on 1 line + keep 3 buttons on same line?

On 6/22/2023 at 3:38 AM, tuanphan said:

You try adding this to Design > Custom CSS

@media screen and (min-width:901px) and (max-width:1200px) {
div#block-e6db60e62e97f379fba4 h4 {
    font-size: 38px !Important;
}
}

Making button text on 1 line + keep 3 buttons on same line?

Hi thank you for your response!

Yes, making the button text stay on 1 line and keep the 3 buttons on the same line. 

@nickmorsillo If you add white-space:nowrap or white-space:pre to the buttons, it will make sure the button text stays on one line as the screen becomes smaller.

However, because fluid engine works on a grid, unless you've dragged the button blocks to take up enough horizontal space so that they don't overlap on smaller screens, I don't believe you'll have the flexibility to keep the text in one line, and three buttons that way.

What you could do is use hyperlinked text instead of button blocks, and style the text to take on the same styling and hover interactions as your buttons. As they will live in one block assigned in the FE grid instead of 3 separate blocks, they will be more flexible as the screen gets squished. Lmk how that goes and if you need extra code help, unless @tuanphan has a better way?

13 hours ago, MayaViolet said:

@nickmorsillo If you add white-space:nowrap or white-space:pre to the buttons, it will make sure the button text stays on one line as the screen becomes smaller.

 

However, because fluid engine works on a grid, unless you've dragged the button blocks to take up enough horizontal space so that they don't overlap on smaller screens, I don't believe you'll have the flexibility to keep the text in one line, and three buttons that way.

 

What you could do is use hyperlinked text instead of button blocks, and style the text to take on the same styling and hover interactions as your buttons. As they will live in one block assigned in the FE grid instead of 3 separate blocks, they will be more flexible as the screen gets squished. Lmk how that goes and if you need extra code help, unless @tuanphan has a better way?

I usually use Code Block to add 3 buttons, or adjust CSS grid-column-start/grid-column-end of 3 buttons