-1
Mes lettres de mon bouton sont coupées chaque fois que je fais ma fenêtre plus petite. Je ne suis pas sûr de savoir comment mettre en œuvre une solution. J'ai fourni le CSS et le HTML. J'ai également fourni une image pour une meilleure compréhension. Je sais que je dois changer ou ajouter quelque chose dans le css mais je ne sais pas quoi.Lettres se coupant du bouton quand je fais ma fenêtre plus petite
Je ne suis pas sûr de savoir comment implémenter une solution. J'ai fourni le CSS et le HTML. J'ai également fourni une image pour une meilleure compréhension.
.button {
\t display: inline-block;
\t position: relative;
\t cursor: pointer;
\t outline: none;
\t white-space: nowrap;
// \t margin: 5px;
\t padding: 0 22px;
\t font-size: 14px;
\t font-family: 'Roboto', sans-serif, 'Lato';
\t height: 40px;
width: 220px;
\t line-height: 40px;
\t background-color: #428bca;
\t color: #FFF;
\t font-weight: 600;
\t text-transform: uppercase;
\t letter-spacing: 1px;
\t border: none;
\t text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
margin: 0 auto;
text-align: center;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: #ffffff;
}
.panel-heading {
color: #428bca;
background-color: #428bca;
border-top: 1px solid #dddddd;
\t border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
//border-top-right-radius: 3px;
//border-top-left-radius: 3px;
}
.panel-body {
padding: 15px;
border: 1px solid #dddddd;
}
.nobottommargin {
margin-bottom: 0 !important;
}
.leftmargin-sm {
margin-left: 30px !important;
}
.button.button-rounded {
\t border-radius: 3px;
}
.button.button-reveal {
\t padding: 0 28px;
\t overflow: hidden;
}
.button.button-large {
\t padding: 0 26px;
\t font-size: 16px;
\t height: 46px;
\t line-height: 46px;
}
.button-teal {
\t background-color: #428bca;
}
/*code for the icon */
.button-reveal i {
position: absolute;
width: 2em;
height: 100%;
line-height: 45px;
background-color: rgba(0, 0, 0, .2);
text-align: center;
left: -100%;
transition: left 0.25s ease;
}
.button-reveal:hover i {
left: 0;
}
/* code for the letters*/
.button-reveal span {
display: inline-block;
margin: 0 2em;
transition: margin 0.35s ease;
}
.button-reveal:hover span {
margin: 0 1em 0 3em;
}<div class="panel-heading">
\t \t \t \t \t \t \t \t <h2 class="panel-title">Access This Service</h2>
\t \t \t \t \t \t \t </div>
<div class="panel-body">
<!-- angular -->
\t \t
<div ng-if="c.html" ng-bind-html="c.html"></div>
<a href="http://zoom.us" class="button button-rounded button-reveal button-large button-teal"><i class="fa fa-forward" aria-hidden="true"></i>
<span>Go there now!</span></a><br>
Note: If you haven’t accessed Zoom before, create a new account at <a href="http://zoom.us">zoom.us</a>.
</div>
Le problème est le rembourrage autour des lettres. Je suppose que lorsque vous réduisez la fenêtre, la barre latérale se rétrécit, tout comme le bouton. Vous pouvez lui donner une largeur minimale, comme proposé par une réponse, mais cela pourrait empêcher votre barre latérale de rétrécir. Vous pouvez également réduire le remplissage en utilisant '@ media' pour contrôler les styles de bouton sous une certaine largeur de fenêtre. – jfeferman
min-largeur désordre avec mon bouton lui-même. Comment utiliser @media? – crucl