0
The image was obtained with the browser resized to the dimensions 390 X 650 approximately.
I would like to know how to do the text "[email protected]" that is inside a h4
fits the size of alert
and leave the responsiveness ok.
I’m wearing bootstrap 3.6.
I tried to use @media in css and decrease the text with font-size:
for 5tp but became microscopic!!
What should I do?
<!DOCTYPE html>
<html>
<head>
<title>Teste Pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/css/estilo.css"/>
<script type="text/javascript" src="bootstrap-3.3.6/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Projeto</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="Produtos.html">Produtos</a></li>
<li><a href="Servicos.html">Serviços</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Produtos</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="QuemSomos.html">Quem somos</a></li>
<li class="active"><a href="#">Contato<span class="sr-only">(current)</span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="espaco">
</div>
<div class="row">
<div class="col-xs-offset-1 col-xs-3">
<img src="img/phone.png" alt="" title="" class="img-responsive"/>
</div>
<div class="col-xs-7">
<div class="alert alert-success">
<strong><h3>Televendas:</h3></strong>
<h4>
(xx) xxxx-xxxx
(xx) xxxx-xxxx
</h4>
</div>
</div>
<div class="col-xs-offset-1"></div>
</div>
<div class="row">
<div class="col-xs-offset-1 col-xs-3">
<img src="img/arroba.png" alt="" title="" class="img-responsive"/>
</div>
<div class="col-xs-7">
<div class="alert alert-success textoEmail">
<strong><h3>Email</h3></strong>.<h4>
[email protected]</h4>
</div>
</div>
<div class="col-xs-offset-1"></div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted centralizar">Dinossauro Software.</p>
</div>
</footer>
</body>
Applies a
font-size: Valorempx;
to regulate the font size or put the div asoverflow: hidden;
if I’m not mistaken it causes the line to be broken– ayelsew