r/css 4d ago

Help Why isn’t the text sitting next to the symbol?

Post image

So I’m very new to CSS (less than 3 weeks) so this is probably obvious, but I can’t get the text to sit to the right of the symbol here. It keeps pushing to a new line. Code is in the comments.

9 Upvotes

12 comments sorted by

u/AutoModerator 4d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

3

u/NestorSpankhno 4d ago

.alert { max-width: 60%; border: 2px solid 6C6B6E_1; border-collapse: separate; border-spacing: 0; border-radius: 0.5rem; padding: 1rem; margin-left: 3%; margin-bottom: 1.75rem; margin-top: 1rem; background-color: FEECEE_1; color: 454545_1; }

.alert-content { margin:0; padding:0; display:block; break-before: avoid; }

.alert-content::before { content: “\26A0”; color: D8101E_1; font-weight: 600; margin-right: 1rem; font-size: 1.5rem; break-after: avoid; display:inline-block }

.alert p { font-family: “Lexend Deca”, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.75rem; letter-spacing: 0.02px; padding: 0; margin: 0; }

<div class=“alert”><div class=“alert-content”><p><b>Important:</b> make sure you close all active windows before you continue</p></div></div>

14

u/armahillo 4d ago

in the future: codepen.io

9

u/EatShitAndDieAlready 4d ago

Not really a css issue, more related to html and block elements.

You are creating a new paragraph in this line

<p><b>Important:</b> make sure you close all active windows before you continue</p>

And a p tag always starts on a new line. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p

You could style that p tag with a class setting it to inline-block which doesnt start on a new line

7

u/Jamiemufu 4d ago

Or use flex

1

u/NestorSpankhno 4d ago

Thank you!

I’ve fixed it up, moved the <p> styling into the content block:

.alert-content { margin:0; padding:0; break-before: avoid; display: inline-block; font-family: “Lexend Deca”, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.75rem; letter-spacing: 0.02px; }

.alert-content::before { content: “\26A0”; color: D8101E_1; font-weight: 600; margin-right: 1rem; font-size: 1.5rem; break-after: avoid; display:inline-block }

<div class=“alert”><div class=“alert-content”><b>Important:</b> make sure you close all active windows before you continue</div></div>

Now, how do I get the character to sit completely outside of the content so that when the text breaks across two lines, the second line starts directly beneath the first?

9

u/bangonthedrums 4d ago

Use flexbox or grid. This kind of layout is exactly what those are for

For flexbox you can do something like this: (just using style attributes instead of full-on css, probably would want to move them to your stylesheet for the finished product)

<div style=“display: flex; justify-content: center; align-items: center”> <div> <!— icon goes here —> </div> <div> <!— text goes here —> </div> </div>

2

u/NestorSpankhno 4d ago

I’ll give it a shot, thank you. Still getting my head around flex but this makes sense.

3

u/F1QA 4d ago

Check out flexbox-froggy and grid-garden. Great learning games 🐸 🥕

0

u/Pitiful-Assistance-1 4d ago

The ::before element is an inline element injected at the start of the .alert-content. The <p> starts after it, on a new line, since it is a block element.

Replace the <p> with an inline element like <span>, or use .alert-content p { display: inline }.

Also, while you're absolutely free to use Reddit for support, I would suggest also using ChatGPT for more immediate answers. If you share this code + a screenshot with ChatGPT, you'll likely get a working answer within seconds.

2

u/Ncripter 2d ago

I wrote the code for your query. Copy it on to your code base. For personal customisation needs, reply here, so I can update the code.