is there any way to inspect the elements as in the PC but in a chrome navigator of ipad?

I have a problem with a header and a paragraph, which are invisible on the browsers page of an ipad, but are visible on other mobile devices such as samsung galaxy. I would like to know if there is any application that is like the element inspector in the pc browsers or if you can help me with this problem. I leave the code:

HTML

               <div class="contenedorCeo">
                    <div class="ceo wow fadeInUp">
                        <img src="img/miembro1.jpg">
                        <h3>MATTIAS PRATS</h3>
                        <p>Director General</p>
                    </div>
                    <div class="ceo wow fadeInUp" data-wow-delay=".1s">
                        <img src="img/miembro2.jpeg">
                        <h3>MIKE GUTIERREZ</h3>
                        <p>Jefe Ejecutivo</p>
                    </div>
                    <div class="ceo wow fadeInUp" data-wow-delay=".2s">
                        <img src="img/miembro3.jpg">
                        <h3>SARAH STONE</h3>
                        <p>Coordinadora de Ventas</p>
                    </div>
                    <div class="ceo wow fadeInUp" data-wow-delay=".3s">
                        <img src="img/miembro4.jpg">
                        <h3>CHRIS DOLKER</h3>
                        <p>Presidente</p>
                    </div>
                    <div class="ceo wow fadeInUp" data-wow-delay=".4s">
                        <img src="img/miembro5.jpg">
                        <h3>JENNY JAMMIL</h3>
                        <p>Directora general</p>
                    </div>
                    <div class="ceo wow fadeInUp" data-wow-delay=".5s">
                        <img src="img/miembro6.jpg">
                        <h3>PABLO RIVERA</h3>
                        <p>Jefe Ejecutivo</p>
                    </div>
                </div>

CSS

.contenedorCeo{
margin-top: 80px;

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-flow: row wrap;
}

.ceo{
width: 33.3%;
position: relative;
overflow: hidden;

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
}

.ceo img{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
vertical-align: top;
-webkit-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}

.ceo img:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

.ceo h3{
position: absolute;
font-size: 40px;
font-weight: 300;
top: 160px;
color: #fff;
}

.ceo p{
position: absolute;
font-size: 18px;
top: 210px;
color: #fff;
}

.ceo:hover p,
.ceo:hover h3{
-webkit-animation: fadeOut .8s ease-in-out 0s 1 normal forwards;
animation: fadeOut .8s ease-in-out 0s 1 normal forwards;
}

@-webkit-keyframes fadeOut{
 from{
     opacity: 1;
 }

 to{
     opacity: 0;
 }
}

@keyframes fadeOut{
 from{
     opacity: 1;
 }

 to{
     opacity: 0;
 }
}

It's supposed to look like this:

but on the ipad neither the h3 nor the p.