Question

I’m developing a small vCards website. I’m using the Twitter Bootstrap LESS files as a base for the responsiveness and the grid.

I had an issue before, the grid wasn’t responsive (Stack Overflow question) and based on the answer I realized that I had to include the responsive.less file together with the bootstrap.less file in order to get the responsive features.

After having fixed that issue, I still get more weird behavior:

<div class="headline-container pull-left">
    <div class="headline-inner">
        <h1>Roland Groza</h1>
        <h4>Frontend Developer</h4>
    </div>
</div>

Inspect the DOM and look for the above markup. Now if you start resizing the window down to the least it can go, between 410px and 514px, you will notice that the markup will inherit some CSS that is supposed to be applied for the MQ rule @media (max-width: 480px) { }, but just a part of it, as Twitter Bootstrap also has some CSS for that rule which is only applied when going beyond 410px and not above.

Did someone encounter the same behavior before, and if so is there a fix for it?

EDIT : The CSS changes that you should look for is the font sizes and margin / padding on the headline :

<h1>Roland&nbsp;Groza</h1>
<h4>&lt;&nbsp;Frontend&nbsp;Developer&nbsp;/&gt;</h4>

The above text will be the one which behaves a bit weird.

Answer 1

If you are talking about the <h1> heading not being responsive, you can use slabText or fix it with an wrapper.