Currently, I am working on a personal project using bootstrap 4. However, I've encountered an issue with the class "card" in my gallery section. One card header has 'white-space' set which breaks the word, while the other does not have any 'white-space'. This problem only occurs on a laptop screen, as it works fine on phone screens and desktops.
I've attempted to resolve this by utilizing CSS3 media queries, adjusting margins, but so far, nothing has worked. I searched through StackOverflow for similar problems, but most were related to aligning elements inside the card-body. My goal is to have the card classes aligned properly regardless of word wrapping within them. Unable to provide a direct link to the image, please use the following URL: https://i.sstatic.net/evJWh.jpg
This is how my HTML and CSS are structured:
.whiteSpaceNotAllowed {
white-space: nowrap;
}
.whiteSpaceAllowed {
white-space: nowrap;
}
@media screen and (max-width: 768px) {
.whiteSpaceAllowed {
white-space: normal;
}
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<div class="card gallerijCard">
<div class="card-header GallerijCardHeader">
<center><p>Ontwerp <span class="whiteSpaceAllowed">& interieur</span></p></center>
</div>
<div class="card-body">
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card gallerijCard">
<div class="card-header GallerijCardHeader">
<center><p><span class="whiteSpaceNotAllowed">Renovatie</span></p></center>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
To clarify my objective:
The term 'Ontwerp & interieur' should wrap on a laptop screen, yet both cards must remain aligned horizontally.