Границы элемента <p>не отображаются в качестве блочного элемента в устройстве Ipad / Pro

Question

Когда я настраиваю браузер в Ipad / Ipad pro, фиолетовые границы элемента

не отображаются. Почему?

Соответствующий код:

<img src="RotateMobile.gif" alt="" id="rotateAnimation">
    <p id="rotateText">Please turn your device</p>

@media screen and (max-width:1024px) {
    @media screen and (orientation:portrait)
    {

        #rotateAnimation {
            width: 80vw;
            height: 60vh;
            display: block;
            margin: auto;
            position: relative;
            top: 30vh;
        }

        #rotateText {
            font-size: 300%;
            text-align: center;
            color: white;
            text-shadow: 2px 2px black;
            border-top: 3vh solid #D52C82;
            border-bottom: 3vh solid #D52C82;
            position: absolute;
            top: 0px;
            margin: 0;
        }
    }
} 

против

Answer 1

Дополнительно добавить слева: 0;и справа: 0;на rotateText,

#rotateText {
       left:0;
       right:0;
    }