Hello, everyone! This was my first project here and I had lots of fun. My question is about the text formatting as in, in how many lines the text is display as, or, where the lines break. I tried a few things like using the white-space property and the html <pre> tags. I'm not looking for a super detailed answer(although those would be greatly appreciated ) , just some pointers as to how I could've done it. So my question is, how could I have have achieved the same result without using the <br> tags? Thank you so very much for your time!
Here's my html:
<div class="body">
<p class="p-main">
Discover the benefits of data<br />
analytics and make better decisions<br />
regarding revenue customer<br />
experience, and overall efficiency.
</p>
<p class="p-main-large">
Discover the benefits of data analytics and make <br />better
decisions regarding revenue customer<br />
experience, and overall efficiency.
</p>
</div>
Then, I have a media query that "swaps" from one paragraph to the other when it gets to a certain size, by using the display property. I'm not proud of this solution, but I did what I could.
My sass
.p {
&-main {
color: $secondary-white;
line-height: 1.5;
// I really don't like this solution to obtain the right text formatting
// See mark up*
&-large {
display: none;
color: $secondary-white;
line-height: 1.5;
@include mq("huge") {
display: block;
}
}
@include mq("huge") {
display: none;
}
}
&-stats {
color: $tertiary-white;
text-transform: uppercase;
margin-top: 8px;
}
}
