0
votes

Certaines de mes CSS ne fonctionnent pas pour passer à la vue mobile

Je me demande pourquoi une partie de mes codes CSS ne fonctionne pas dans la vue mobile. Voir l'image ci-jointe. Je veux avoir ces liens (test de vitesse) à droite avec quelques espaces entre le texte gauche.

capture d'écran p>

sur bureau, c'est bien (il y a suffisamment d'espace), mais quand il va à la vue mobile, toutes les liaisons collent vers le texte gauche. P>

Voici mon HTML STRT> CODE: P>

@media (min-width:961px) {
.server-section{
padding:50px 0px 300px;
height: 650px;
background-color:#f8fefa;
width:100%;
background-image:url("../images/resource/server-location.jpg");
}

.server-section ul {
list-style-type: none;
}

.server-section li {
border-bottom: 1px solid #d4d1cb;
}

.server-section li span {
display: inline-block;
padding: 15px;
color: #fff;
}

.server-section li a {
float: right;
position: relative;
top: 20px;
color: #00fc97;
padding-left: 20px;
}

.server-section li a:hover {
color: #fff;
}

.server-section li img {
margin-right: 20px;
}

.server-section #left-server {
float:left;
margin-left:35px; 
width: 30%;
}

.server-section #center-server {
float:left; 
width: 25%;
margin-left:50px;
}

.clear{
clear:both;
}

.server-section #right-server {
float:left;
margin-left:45px; 
width: 28%;
}
}

css responsive-design

0 commentaires

4 Réponses :

0
votes

Essayez l'indentation

a{
text-indent:  5;
}

1 commentaires

Généralement, une réponse devrait avoir un peu plus d'explication à cela au-delà du juste code - il doit être utile aux autres à l'avenir.

1
votes

Vous avez un @media (min-largeur: 961px) code> Emballage tous em> de votre CSS, qui indique au navigateur Web de ne utiliser que CSS lorsque la largeur du La fenêtre est d'au moins 960px. Ainsi, lorsque vous passez à une fenêtre plus petite (non mobile en particulier), ces styles disparaissent.

Si vous supprimez cela, votre formatage revient, même sur une fenêtre étroite. P>

Voici un échantillon, en utilisant une version légèrement modifiée de votre code. Si vous le visualisez en plein écran et effectuez votre fenêtre de moins de 400 pixels de large, le fond vert deviendra orange. P>

p>



<section class="server-section">
  <div id="left-server">
    <ul>
      <li><span>Las Vegas, NV</span><a href="#">Speed Test</a></li>
      <li><span>Philadelphia, PA</span><a href="#">Speed Test</a></li>
      <li><span>Los Angeles, CA</span><a href="#">Speed Test</a></li>
    </ul>
  </div>
  <div id="center-server">
    <ul>
      <li><span>Dallas, TX</span><a href="#">Speed Test</a></li>
      <li><span>Denver, CO</span><a href="#">Speed Test</a></li>
      <li><span>Bend, OR</span><a href="#">Speed Test</a></li>
    </ul>
  </div>
  <div id="right-server">
    <ul>
      <li><span>Canada</span><a href="#">Speed Test</a></li>
      <li><span>Sweden</span><a href="#">Speed Test</a></li>
      <li><span>Germany</span><a href="#">Speed Test</a></li>
    </ul>
  </div>
</section>

0 commentaires

0
votes

Essayez d'ajouter ci-dessous l'extérieur de votre requête @Media. Votre requête médiatique empêche tous les styles d'écrans inférieurs à 961px. Vous devrez spécifier des styles pour des écrans plus petits.

.server-section li span {
  margin-right: 10px;
}

0 commentaires

0
votes

La requête multimédia que vous avez est plus petite des écrans que 961px code>, je pense qu'il est préférable de créer une requête pour Mobil

@media (max-width: 599px) {
   .server-section a{
      margin-left: 15px;
   }
}

0 commentaires