How can I fix my custom CSS text alignment issue?

Store Design
, ,

Topic summary

A user encountered a CSS text alignment problem where bold text aligned to the right appeared on a separate line instead of staying inline with left-aligned text. They also expressed concerns about custom CSS code slowing down their website.

Resolution:

  • The issue was self-resolved before community assistance could be provided
  • The user fixed the alignment by using display: flex, justify-content: space-between, and align-items: center on h4 elements
  • This approach kept content on the same line while achieving the desired layout

Additional context:

  • Another community member offered to help debug if provided the website URL
  • The final CSS solution also included styling for buttons, headings, and image hover effects
  • The performance concern about CSS slowing down the website was raised but not addressed in the discussion
Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Dear community,

I created a custom css to align on the right the BOLD text only.

I have an issue, it works but the text is not on the same line than the text on the left. There is a line break…

By the way, all those custom css code slow down my website… what can i do ?

Can you please help me? Below is my custom css:

h3,
h4 {
text-align: left;
}
h4 {
border-bottom: 0.5px solid #999;
padding-bottom: 7px;
font-size: 14px;
}
h3 {
font-size: 22px;
}
h4 strong,
h4 b {
text-align: right !important;
display: block;
}

Capture d’écran 2024-02-07 à 10.55.30.png
Capture d’écran 2024-02-07 à 10.55.30.png600×736 72.4 KB

Thank you guys !

2

Hello @1F
Kindly provid the url so that we can debug at our level.

3

Many thanks dear,

I’ve just fix it this morning and forgot to mark it as accepted solution.

Here is the code:

.animate-arrow {
font-size: 15px;
padding: 10px 45px;
background-color: #000000;
border-radius: 30px;
color: #ffffff;
}
h3,
h4 {
text-align: left;
}
h4 {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 0.5px solid #999;
padding-bottom: 7px;
font-size: 14px;
}
h3 {
font-size: 22px;
}
.multicolumn-card__image-wrapper .media:hover {
transform: scale(1);
}

Thank you!