My problem is that when I use a smaller icon (a left floated span with MDI Icons used via class ::before selection), the text in my message boxes wraps around the bottom of the icon.
One span element has a larger icon (50px) and doesn’t have the problem (I have no clue why). Here’s a screen recording of the behavior:
What I want is for the text to stay aligned on the right side of the icon without wrapping underneath it. Hopefully this makes sense.
I think I might need to switch from left floating the icon to something else, but I’m not sure how to accomplish what I need without float.
Here is my HTML:
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UI Playground</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/admonitions.css">
<link rel="stylesheet" href="css/icons.css">
</head>
<body>
<div class="admonition info">
<span class="admonition-icon icon-35 mdi-information-outline"></span>
<span class="admonition-title">This is an informational message with an Icon</span>
<span class="admonition-text">
Ut mollis ligula vulputate lectus eleifend, et commodo nibh faucibus.
</span>
</div>
<div class="admonition-alt">
<span class="admonition-icon icon-55 mdi-ubuntu"></span>
<span class="admonition-title">This is the title</span>
<span class="admonition-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper turpis ex, eget fringilla ligula gravida nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vulputate lacus sed massa aliquet suscipit. Suspendisse potenti. Maecenas iaculis dolor non mollis ornare.
</span>
</div>
<div class="admonition-alt">
<span class="admonition-icon icon-35 mdi-ubuntu"></span>
<span class="admonition-title">This is the title</span>
<span class="admonition-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</div>
</body>
</html>
And CSS:
:root {
--ui-font-stack-sans: "Helvetica Now Text", "Helvetica LT Pro", "Helvetica", "SF Pro Text", "Arial", sans-serif;
}
body {
font-size: 15px;
color: #555555;
line-height: 1.5em;
font-family: var(--ui-font-stack-sans);
}
/* Global Admonition Defaults */
div.admonition,
div.admonition-alt {
border-radius: 5px;
overflow: visible;
page-break-inside: avoid;
display: flow-root;
padding: 1em 0 1em 0em;
margin-bottom: 1.5em;
font-family: var(--ui-font-stack-sans);
}
div.admonition>.admonition-title,
div.admonition-alt>.admonition-title {
display: flow-root;
font-size: 1.1rem;
color: #535464;
padding-left: .96em;
font-weight: 400;
}
div.admonition>.admonition-text,
div.admonition-alt>.admonition-title {
color: rgb(118 116 116);
font-size: .94em;
font-weight: 400;
display: flow-root;
line-height: 1.5em;
padding-left: 1.2em;
margin-top: 2px;
}
/* Blue Info Admonition Colors */
div.admonition.info {
border: 1px solid #3F73F2;
background-color: #F8FAFF;
}
div.admonition.info>.admonition-icon {
color: #3F73F2;
margin-top: -7px;
}
div.admonition.info>.admonition-title {
color: #2e72d8;
font-weight: 400;
}
div.admonition.info>.admonition-text {
color: #7182b1;
}
/* Gray Admonition Defaults */
div.admonition-alt {
border-top: 4px solid #b4b3b3;
border-radius: 0;
background-color: #fafafc;
font-family: var(--ui-font-stack-sans);
overflow: visible;
page-break-inside: avoid;
display: flow-root;
padding: .7em 0 .7em 0em;
margin-bottom: 1.5em;
}
div.admonition-alt>.admonition-icon {
color: #414247;
}
div.admonition-alt>.admonition-title {
display: flow-root;
color: #3a3d42;
font-weight: 500;
margin-top: 5px;
font-size: 1.4em;
padding-left: 0.6em;
margin-bottom: .5rem;
letter-spacing: -.02rem;
}
div.admonition-alt>.admonition-text {
display: flow-root;
color: #686868;
font-size: 16px;
font-weight: 400;
padding-left: 1em;
line-height: 1.5em;
margin-bottom: 10px;
letter-spacing: -.02rem;
}
/* Icon Specifics */
.admonition-icon {
float: left;
}
.icon-35 {
font: normal normal normal 35px/1 "Material Design Icons";
display: inline-block;
text-rendering: auto;
position: relative;
top: 8px;
margin-left: 14px;
}
.icon-55 {
font: normal normal normal 55px/1 "Material Design Icons";
display: inline-block;
text-rendering: auto;
position: relative;
top: 3px;
margin-left: 16px;
}
Any help, guidance, or ideas would be greatly appreciated!
2
Answers
You can use grid to get the layout you want
I have added a new container around the required part and css goes here
Try this and you can refer to https://www.geeksforgeeks.org/css-grid-layout-module/
It depends what you want to do with the text.
If you want to hide it than you can add overflow:hidden; and white-space:nowrap; to your class styles
Or if you want to make the text smaller than you can use media queries, add an additional class style like so:
Change the max-width and font size to your liking. And also add to where you think is necessary.