The appearance of unnecessary empty spaces at the conclusion of the 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 am encountering some issues with unwanted empty spaces and grid misalignment on my website when trying to create a menu using the code provided above. When accessing the page on a phone, the icons appear completely off-grid. You can visit my site to see the problem firsthand. Any help in resolving these spacing issues would be greatly appreciated.

htmlcss

Answer №1

After a quick review of your code, it seems that you are utilizing bootstrap to ensure scalability across different viewports. To achieve this smoothly, I suggest implementing the following solution:

Beneath 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>
... // Remaining similar blocks for image assets
</div>

In your CSS, make the following adjustments:

.article-image1 {
  position: relative;
  display: block;
  margin: auto;
  height: 256px;
  width: 256px;
}
... // Repeat modifications for other article images

This configuration should address the scaling issues you're experiencing on mobile devices. Please let me know if this solution works or if you have any inquiries!

Best regards,

James

EDITED FOR SIMPLIFIED CODE:

To streamline your CSS and HTML structure, consider the following revisions which utilize classes and IDs for easier maintenance:

Updated HTML:

<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>
... // Repeat blocks with unique ID for each image type
</div>

Revised CSS:

.ar-image {
    position: relative;
    width: 256px;
    height: 256px;
    display: block;
    margin: auto;
}
... // Combined styles for all article images by using shared classes

Answer №2

Simply eliminate the top and right attributes from the following objects: ar-image1, ar-image2, ar-image3, ar-image4, ar-image5, ar-image6

Then insert this code snippet into your CSS file:

.entry-content a {
    float: right;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with HR functionality in Outlook email

<table> <tr> <td class="h1" colspan="12" style="font-family: 'proxima_nova_rgbold', Arial, Helvetica, sans-serif;font-size: 18px;text-align:center; padding-top:10px;padding-left:30px;text-transform: uppercase;padding-bottom: 8 ...

htmlcsshtml-table

Any tips for avoiding a new line when generating html attribute values to prevent my json string from breaking?

When working with JSON string values in button element attributes, I have encountered an issue where a single quote causes the value to break and create newlines. For example: var $json = JSON.stringify('{"Long_text":"This is \'my json stri ...

javascripthtml

display child element at full width within a parent element that is not full width

I have a container with a maximum width of 1024px, and I want one of its child elements to take up 100% width starting from the left edge of the screen. Is there a way to achieve this without adding extra HTML markup? I know I can make the child element 1 ...

htmlcsswidth

What is the reason behind Bootstrap's size classes becoming ineffective after 5?

Consider this: <div class="container m-5"> is effective, while <div class="container m-9"> does not produce the desired result. It appears that any number greater than 5 does not function as expected. What could be the rea ...

csstwitter-bootstrap

`Using a PHP function parameter within an array: An essential guide`

I'm encountering an issue while declaring a function parameter within my array. Here is the simplified version of what I have: function taken_value($value, $table, $row, $desc) { $value = trim($value); $response = array(); if (!$value) ...

phphtmlarraysjsonfunction

The information in the table is spilling out beyond the boundaries

I'm facing an issue with my bootstrap table where if a field value is too long, the table extends past the container length. I tried using responsive-table to prevent this, but then a scroll bar appears at the bottom, making it difficult to view the d ...

htmlcssasp.net-mvctwitter-bootstrapdatatables

What is the best way to determine the size of the URLs for images stored in an array using JavaScript?

I am working on a project where I need to surround an image with a specific sized 'div' based on the image's dimensions. The images that will be used are stored in an array and I need to extract the height and width of each image before disp ...

javascripthtmlcssarrays

Margin and padding have the ability to increase the size of an image

Is there a technique to position the logo.png so that it appears approximately one-third of the way across the page without affecting its size? I've attempted to use padding or margin adjustments, but it seems to distort the image despite having limit ...

htmlcssimage

Focusing on a specific div element

I need help selecting the initial div block that contains the word "Target". <div class="box-content"> <div> <div>Target</div> <div>xxxx</div> <div>xxxx</div> <div>xxxx</div> ...

csscss-selectors

Store <td> in a variable

At the moment, I have a script that allows users to input an item name, along with its size, color, and other options. Each of these entries is saved as individual items with their custom specifications, such as a black t-shirt in large size. The script c ...

javascriptjqueryhtmlcssjquery-ui

Generating PDF files from HTML code

To convert an HTML file to a PDF, I use The process involves using the following code: <script type="text/javascript" src="http://www.pdfmyform.com/js/pdfmyform.js"></script> <a onclick="pdfmyform(this);" href="#">PDF this page!</a& ...

jqueryhtml

magnetic container: stationary container nested within absolutely positioned container

I recently created a page that can be viewed here: [LINK] This page is set up to scroll horizontally, resulting in a row of divs with black borders. However, I am facing an issue with the smaller divs inside (red ones). I want them to stay within the par ...

javascriptjqueryhtmlscrollposition

What are the steps to shift columns to the left within a table?

I need to adjust the alignment of the columns and also create a fixed size space between them. Currently, it appears like this: https://i.sstatic.net/F7Rqk.png My desired outcome is something similar to: https://i.sstatic.net/ALKa9.png CSS Code: .tabl ...

htmlcss

How can I make angular material data table cells expand to the full width of content that is set to nowrap?

This example demonstrates how the mat-cells are styled with a specific width: .mat-cell { white-space: nowrap; min-width: 150rem; } If the width is not specified, the table will cut off the text due to the white-space property being set to nowrap. Is ...

htmlcssangularangular-material

Struggle with Firefox: Table-cell with Relative Positioning Not Acting as Parent

Upon investigation, I have come across a unique layout issue that seems to only affect Firefox. It appears that elements with display:table-cell; do not act as the positional parent for descendants with position:absolute;. It is surprising to discover th ...

htmlcssfirefox

Is the Packery image grid only functional when the background image is specified in CSS and not in JavaScript? Perhaps we need to look into using Await/Sem

I've successfully implemented a packery image grid that is responsive and functional when the background image in the .item-content section is defined in the CSS file: http://codepen.io/anon/pen/eJdapq .item-content { width: 100%; height: 100%; ...

javascriptjqueryhtmlcsspackery

Is there a way to smoothly navigate back to the top of the page after the fragment identifier causes the page to scroll down?

I do not want to disable the functionality of the fragment identifier. My goal is for the page to automatically scroll back to the top after navigating to a specific section. This inquiry pertains to utilizing jQuery's UI tabs. It is crucial to have ...

javascriptjqueryhtml

What are some solutions for resolving the problem with the anchor attribute in Safari?

There is a problem with the anchor tag used in my website. The number 619-618-1660 is being displayed when I view the site on Safari browser or an iPhone, even though it is written as (href="tel:619-618-1660"). See the image at the link below for reference ...

phpwordpresshtmlcss

What is the method for creating a checkbox in CSS that includes a minus symbol inside of it?

Can you create a checkbox with a minus "-" symbol inside using just html and css? I attempted to achieve this with JavaScript by using: document.getElementsByTagName("input")[0].indeterminate = true; However, the requirement is to accomplish this using ...

htmlcss

JS How can I generate individual buttons in a loop that trigger separate actions?

Currently, I am working with loops in jQuery to create a series of boxes that contain specific values. The problem arises when I try to assign actions to each box based on the values from an array. For example, I want each box to trigger a different alert ...

javascriptjqueryhtmlcss