如何使 H1 标签响应？

Question

Hello everyone my question is as follows. How can I make the H1 tag responsive so that it doesnt shift boxes on my image. I am using bootstrap 4.5.2 for my project.

Here is an image on the pc version

Here is an image on the mobile version (the H1 tag has shifted 1 box to the left)

Here is my html code

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
    officeMap
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">officeMap</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="dynamic-content">
                <img src="PlanPage/Resources/grid.png" alt="officeMap" class="img-fluid">
                <div class="room1"><h1>1</h1></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Here is my css

body {
    background-image: url('Resources/blurred_desk1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.room1 {
    position: absolute;
    bottom: 10%;
    left: 12%;
}

The image im using https://hbr.org/resources/images/article_assets/2013/04/grid.png

Answer 1

You can not use percentage values and expect them to behave this way.

You can use flexbox and set fix size for image and shrink h1 to get remaining width with flex-shrink-1 .

Something like this: Codepen

Answer 2

I tried like this and it worked.

@media screen and (min-width: 1200px){
    .room1 {
        position: absolute;
        bottom: 10%;
        left: 12%;
    }
}
@media screen and (max-width: 1199px) and (min-width: 990px) {
    .room1 {
        position: absolute;
        bottom: 10%;
        left: 18%;
    }
}
@media screen and (max-width: 989px) {
    .room1 {
        position: absolute;
        bottom: 10%;
        left: 30%;
    }
}