CODEWITHSUNDEEP
htmlcss
Ali Noori
Ali Noori

Reputation: 13

unwanted empty spaces apear at the end of 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>

I want to create a menu for my site with some clickable icons but some unwanted empty spaces appear when I use the code above. Also when I access the page with phone the icons appear completely of grid. you can check my site to see what actually happens. any help to eliminate these empty spaces would be appreciated.

Upvotes: 0

Views: 73

Answers (2)

jstoobz
jstoobz

Reputation: 384

Briefly looking at your code, it looks like your implementing bootstrap, to have everything scale nicely on different view ports I would try implementing a solution as follows:

Under your entry-content div: 

<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>

For your css modify as follows:

.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;
}

This should give you your desired solution, currently with the fixes you have, your mobile doesn't scale properly. Let me know if this works or you have any questions!

Good luck,

James

EDITED FOR SIMPLICITY OF CODE:

To further reduce the clutter in your css, i.e. continually defining the same attributes for parent elements and avoiding using inline css in your html, look at the below modifications and see how I've implemented the class and ID of your article images, should be much easier for you to maintain if you intend on updating or changing anything!

HTML as follows:

<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 as follows:

.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;
}

Upvotes: 1

Rahele Dadmand
Rahele Dadmand

Reputation: 573

just remove the top,right atributes from all of this objects : ar-image1,ar-image2,ar-image3,ar-image4,ar-image5,ar-image6

and add this to your css :

.entry-content a {
    float: right;
}

Upvotes: 1

Related Questions