When you reduce the screen, unwanted indentation appears and the text as if it falls out of the container. How to fix? I use library Bootstrap. enter image description here

/*HEADER*/ .contact { background-color: #eceff1; } .phone { padding: 10px 0; } .phone p { font-size: 0.9em; padding-left: 10px; } .phone img { width: 30px; } /*Large Devices, Wide Screens */ @media only screen and (max-width: 1200px) { .logo img { width: 30px; } } /*Medium Devices, Desctops */ @media only screen and (max-width: 992px) {} /* Small Devises, Tablets */ @media only screen and (max-width: 767px) { .phone { padding: 3px 0; font-size: 0.8em; } .phone img { width: 20px; } .contact .logo img { display: none; } } 
 <div class="container-fluide text-center contact"> <div class="row"> <div class="col-md-4 col-sm-4 phone logo"> <img src="css/img/icon_agua.png" hspace="10"><span>AAAAAAAAAA</span> </div> <div class="col-md-4 col-sm-4 col-xs-6 phone"> <img src="css/img/vodaone.png" class="img-circle" hspace="10"><span>066111111111</span> </div> <div class="col-md-4 col-sm-4 col-xs-6 phone"> <img src="css/img/Kyivstar.png" class="img-circle" hspace="10"><span>097111111111</span> </div> </div> </div> </header>

  • Have you been a col-md-4 col-sm-4 phone logo add class col-xs-12 ? - Makarenko_I_V

0