2017-10-21 76 views
0

espaces vides indésirables apear à la fin de la page

.article-image1 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image1:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/gentleman-e1508436248648.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image1:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image1 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: 0; 
 
    right: 0; 
 
} 
 

 
.article-image1>p { 
 
    display: none; 
 
} 
 

 
.article-image1:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
} 
 

 

 
/*puzzle*/ 
 

 
.article-image2 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image2:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/puzzle.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image2:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image2 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: -286px; 
 
    right: 306px; 
 
} 
 

 
.article-image2>p { 
 
    display: none; 
 
} 
 

 
.article-image2:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
} 
 

 

 
/*Maket*/ 
 

 
.article-image3 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image3:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/minivan.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image3:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image3 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: -572px; 
 
    right: 662px; 
 
} 
 

 
.article-image3>p { 
 
    display: none; 
 
} 
 

 
.article-image3:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
} 
 

 

 
/*figure*/ 
 

 
.article-image4 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image4:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/batman.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image4:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image4 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: -512px; 
 
    right: 0px; 
 
} 
 

 
.article-image4>p { 
 
    display: none; 
 
} 
 

 
.article-image4:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
} 
 

 

 
/*toys*/ 
 

 
.article-image5 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image5:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/robot.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image5:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image5 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: -798px; 
 
    right: 306px; 
 
} 
 

 
.article-image5>p { 
 
    display: none; 
 
} 
 

 
.article-image5:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
} 
 

 

 
/*entertaimnt*/ 
 

 
.article-image6 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image6:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/magician.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image6:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image6 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: -1084px; 
 
    right: 662px; 
 
} 
 

 
.article-image6>p { 
 
    display: none; 
 
} 
 

 
.article-image6:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
}
<a style="display:block" href="http://limootoys.com/?product_cat=lego"> 
 
<div class="ar-image1"> 
 
<div class="article-image1"> 
 
<p>لگو</p> 
 
</div> 
 
</div> 
 
</a> 
 
<a style="display:block" href="http://limootoys.com/?product_cat=puzzle"> 
 
<div class="ar-image2"> 
 
<div class="article-image2"> 
 
<p>پازل</p> 
 
</div> 
 
</div> 
 
</a> 
 
<a style="display:block" href="http://limootoys.com/?product_cat=maket"> 
 
<div class="ar-image3"> 
 
<div class="article-image3"> 
 
<p>ماکت</p> 
 
</div> 
 
</div> 
 
</a> 
 
<a style="display:block" href="http://limootoys.com/?product_cat=figure"> 
 
<div class="ar-image4"> 
 
<div class="article-image4"> 
 
<p>فیگور</p> 
 
</div> 
 
</div> 
 
</a> 
 
<a style="display:block" href="http://limootoys.com/?product_cat=toys"> 
 
<div class="ar-image5"> 
 
<div class="article-image5"> 
 
<p>اسباب بازی</p> 
 
</div> 
 
</div> 
 
</a> 
 
<a style="display:block" href="http://limootoys.com/?product_cat=entertaiment"> 
 
<div class="ar-image6"> 
 
<div class="article-image6"> 
 
<p>سرگرمی</p> 
 
</div> 
 
</div> 
 
</a>

Je veux créer un menu pour mon site avec quelques icônes cliquables mais certains espaces vides indésirables apparaissent lorsque j'utilise le code ci-dessus. Aussi quand j'accède à la page avec le téléphone les icônes apparaissent complètement de la grille. vous pouvez vérifier my site pour voir ce qui se passe réellement. toute aide pour éliminer ces espaces vides serait appréciée.

Répondre

1

regardant brièvement votre code, il semble que votre amorce la mise en œuvre, d'avoir tout échelle bien sur les différents ports de vue j'essayer la mise en œuvre d'une solution comme suit:

Sous votre div entrée de contenu :

<div class="container"> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image1"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=lego"> 
      <div class="article-image1"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image2"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=puzzle"> 
      <div class="article-image2"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image3"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=maket"> 
      <div class="article-image3"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image4"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=figure"> 
      <div class="article-image4"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image5"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=toys"> 
      <div class="article-image5"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image6"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=entertainment"> 
      <div class="article-image6"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
</div> 

Pour modifier css comme suit:

.article-image1 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image1:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/gentleman-e1508436248648.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image1:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image1 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image1>p { 
    display: none; 
} 

.article-image1:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out; 
} 


/*puzzle*/ 

.article-image2 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image2:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/puzzle.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image2:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image2 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image2>p { 
    display: none; 
} 

.article-image2:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out; 
} 


/*Maket*/ 

.article-image3 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image3:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/minivan.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image3:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image3 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto;; 
} 

.article-image3>p { 
    display: none; 
} 

.article-image3:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out; 
} 


/*figure*/ 

.article-image4 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image4:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/batman.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image4:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image4 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image4>p { 
    display: none; 
} 

.article-image4:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out;; 
} 


/*toys*/ 

.article-image5 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image5:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/robot.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image5:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image5 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image5>p { 
    display: none; 
} 

.article-image5:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out;; 
} 


/*entertaimnt*/ 

.article-image6 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image6:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/magician.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image6:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image6 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image6>p { 
    display: none; 
} 

.article-image6:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out; 
} 

.entry-content .img-icon { 
    padding: 10px; 
} 

Cela devrait vous donner à votre solution désirée, actuellement avec les correctifs que vous avez, votre mobile n'échelle pas correctement. Faites-moi savoir si cela fonctionne ou si vous avez des questions!

Bonne chance,

James


ÉDITÉE POUR LA SIMPLICITÉ DE CODE:


Pour réduire encore l'encombrement dans votre css, à savoir définir sans cesse les mêmes attributs pour les éléments parents et en évitant d'utiliser css en ligne dans votre code HTML, regardez les modifications ci-dessous et voir comment j'ai mis en place la classe et l'ID de vos images d'article, devrait être beaucoup plus facile pour vous maintenir si vous avez l'intention de mettre à jour ou de changer quoi que ce soit!

HTML comme suit:

<div class="container"> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=lego"> 
      <div class="article-image" id="lego"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=puzzle"> 
      <div class="article-image" id="puzzle"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=maket"> 
      <div class="article-image" id="maket"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=figure"> 
      <div class="article-image" id="figure"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=toys"> 
      <div class="article-image" id="toys"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=entertainment"> 
      <div class="article-image" id="entertainment"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
</div> 

CSS comme suit:

.ar-image { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.article-image>p { 
    display: none; 
} 

.article-image:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out; 
} 

#lego:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/gentleman-e1508436248648.png); 
} 

#puzzle:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/puzzle.png); 
} 

#maket:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/minivan.png); 
} 

#figure:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/batman.png); 
} 

#toys:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/robot.png); 
} 

#entertainment:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/magician.png); 
} 

.entry-content .img-icon { 
    padding: 10px; 
} 

.entry-content .img-icon a { 
    display: block; 
} 
+0

Merci James, vous aviez raison, il n'a pas évolué correctement sur mobile, mais avec votre code, il est corrigé! –

+0

Pas de problème du tout Ali, toujours heureux d'aider. Découvrez la version éditée que je viens de mettre à jour ci-dessous l'original.Observez comment j'ai utilisé la classe et l'ID de l'article-image pour réduire la redondance lors de la déclaration des attributs identiques sur toutes vos icônes d'image. Aussi, évitez d'utiliser à tout prix les css en ligne, cela vous aidera dans le futur lorsque vous apportez des changements de style, de cette façon vous n'aurez pas à utiliser! Important ou à revenir à votre code HTML pour obtenir les changements souhaités. Heureux codage mon ami! – jstoobz

+0

Quel beau morceau de code! Je vous remercie. Je suis un noob à coder donc votre explication a beaucoup aidé! Je vais les garder à l'esprit. –

1

juste enlever le haut, à droite atributs de tous ces objets: ar-image1, ar-image2, ar-image3, ar-image4, ar-image5, ar-image6

et ajouter ceci à votre css:

.entry-content a { 
    float: right; 
} 
+0

Merci Rahele, je l'ai fait comme vous le suggérez, mais maintenant les icônes de la première ligne n'ont pas la même hauteur! Je veux que les icônes soient dans deux rangées et trois colonnes si possible. –

+0

essayez ceci: .entry-content a { float: right; largeur: 33%; marge inférieure: 48px; } .entry-content p { affichage: aucun; } #content { marge inférieure: 10px; } –

+0

Vous êtes un épargnant de vie! fonctionne comme un charme. Merci beaucoup. –