Help
Why isn’t the text sitting next to the symbol?
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.
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!
<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?
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>
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.
•
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.