html – Web layout being different between pasting in inspector and in the file using vueJS-ThrowExceptions

Exception or error:

I am developing my own website using vueJS as a framework at the moment, but my question is purely HTML / CSS based, though it could be that vueJS is the problem here, so I am mentioning it. I also use bootstrap for the layout.

I have a horizontal list of links for my main page which looks like this:

<div class="row" align="center">
    <div class="col-sm-12 col-md-12">
        <ul class="links-list">
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;twitter</a>
            </li>
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;twitch</a>
            </li>
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;github</a>
            </li>
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;osu!</a>
            </li>
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;steam</a>
            </li>
            <li class="links-list-item">
                <a href="" class="links-link">&gt;&nbsp;youtube</a>
            </li>
        </ul>
    </div>
</div>

With this custom css added ontop:

.links-list{
    width: 100%;
    padding: 1rem;
}
.links-list-item{
    display: inline;
    padding: 5px;
    font-size: initial;
    white-space: nowrap;
}
.links-list-item a{
    transition: all ease-in .3s;
    color: #aaaaaa;
    text-decoration: none;
}
.links-list-item a:hover{
    color: white;
    text-decoration: none;
}

I understand that if I remove the white-space: nowrap; line, that I would get a similar result, but then it breaks at the white-spaces between > and youtube for example and not between each list item.

So when I resize my window to be a bit smaller than usual desktop size, the list doesn’t wrap around and gets out of the bounds of the div like this:
Wrong layout

But I want it to look like this:
Right layout

It does look like this if I post the above code into the inspector (F12) in the browser. Which is very weird to me. The only difference I can spot is that it says there are whitespaces between each list element and in the page without modifying there are no whitespaces between them:

whitespaces

My question is: Why is it different if I paste it into the browser than when I let the vueJS renderer render it? And how can I change the code so it does the same wrapping like when I paste it into the browser?

PS: if you want to take a look at the page on the server and try it out yourself, here is my site.

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *