CSS issue
When I reduce the size of width to check for mobile screens, spaces between the words are increasing
8 Replies
<div class="container-fluid welcomeContainer">
<div class="row">
<div class="col-12 welcome-Head">
<h1>
WELCOME TO <span>MY SHOP</span>
</h1>
<p class="welcome-Para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda vero minus molestias modi excepturi. Libero modi praesentium ex rem dolorem? Ratione nam temporibus numquam accusamus! Non cumque alias vero repellat.
</p>
</div>
</div>
</div>
For mobile screens, that;s how it looks
without seeing the CSS, it's hard to say for sure, but
welcome-Para probably has text-align: justify; on it. That's what that doesyes it does have justify
can't it be justify ?
delete it and see what happens
justify tries to put as many words as possible on a line without letting the space character take up less than one space character normally does, but when it doesn't fit and inserts a linebreak it automatically spaces all the words out so that the end of the last word is at the very last line
it works when I remove the justify
with narrow lines, and especially with long words in narrow lines, you sometimes get really big spaces
there's no fix for that other than not using justify, and therefor not having the right column line up like it does now, because there's just physically no room for more words on that line
okay thanks for your help and quick response