Issues with the alignment of items in an item grid in CSS/HTML are causing the display to appear

Question

Issues with the alignment of items in an item grid in CSS/HTML are causing the display to appear

I am experiencing an issue with the CSS formatting of a section on my website. The products in the product grid do not display properly in order when the screen size is too small.

For instance, if you visit this specific site: and view it on a screen larger than 30", you will notice that all items are aligned perfectly next to each other in the grid mode.

However, when accessing the site on a smaller screen (around 24" or less), the products appear in irregular rows such as having 2 in one row, then 1 in another row, followed by 2 again.

How can I adjust the alignment so that all products display nicely beside each other without any irregular rows? Thank you for your help!

I am using Magento Go platform, and you can inspect the CSS using your browser's development tool.

Thank you!

html css magento

Answer 1

Answer №1

If you want to align your items properly in 4 columns, but are experiencing issues with the image when the screen size changes, try the following code:

.products-grid li.item{
    width: 225px; // Delete this line and add the following style
    width:24%;
}
.products-grid .product-image{
    width: 225px; // Delete this line and add the following style
    width:100%;
}

Alternatively, you can also consider using:

In order to adjust the column count from 4 to 3 on the category page, insert the code below into your app/design/frontend/your_package/your_theme/layout/local.xml file:

<catalog_category_default>
    <reference name="product_list">
        <action method="setColumnCount"><count>3</count></action>
    </reference>
</catalog_category_default>
<catalog_category_layered>
    <reference name="product_list">
        <action method="setColumnCount"><count>3</count></action>
    </reference>
</catalog_category_layered>

To consistently align the list items in 3 columns for all screens, apply the following CSS:

.products-grid li.item{
    width: 225px;
    float:left; //Remove this line
    display:inline; //Remove this line
    display:inline-block; //Add this line
    margin-right:1px; // Remove this line
}

This approach will ensure that 3 items are displayed in a row on every screen, as the display property is set to inline-block, automatically adjusting the margin for proper positioning.

Feel free to give it a try!

Answer 2

If you want to align your items properly in 4 columns, but are experiencing issues with the image when the screen size changes, try the following code:

.products-grid li.item{
    width: 225px; // Delete this line and add the following style
    width:24%;
}
.products-grid .product-image{
    width: 225px; // Delete this line and add the following style
    width:100%;
}

Alternatively, you can also consider using:

In order to adjust the column count from 4 to 3 on the category page, insert the code below into your app/design/frontend/your_package/your_theme/layout/local.xml file:

<catalog_category_default>
    <reference name="product_list">
        <action method="setColumnCount"><count>3</count></action>
    </reference>
</catalog_category_default>
<catalog_category_layered>
    <reference name="product_list">
        <action method="setColumnCount"><count>3</count></action>
    </reference>
</catalog_category_layered>

To consistently align the list items in 3 columns for all screens, apply the following CSS:

.products-grid li.item{
    width: 225px;
    float:left; //Remove this line
    display:inline; //Remove this line
    display:inline-block; //Add this line
    margin-right:1px; // Remove this line
}

This approach will ensure that 3 items are displayed in a row on every screen, as the display property is set to inline-block, automatically adjusting the margin for proper positioning.

Feel free to give it a try!

Issues with the alignment of items in an item grid in CSS/HTML are causing the display to appear

Answer №1

Similar questions

"Is there a way to assign a default value to a select element while also using ng-model and ng-change in AngularJS

Load the flexslider once the fancybox container is opened

Error Message: "BlurbError on /taskapp/taskapp-board/ Failed to parse the remaining: '(status='fresh')' from 'tasks.filter(status='fresh')'"

Displaying and hiding a large image using jQuery's mouseover event

Is it possible to create a mouse-following effect with lighting using Javascript

Error: AngularJS: Invalid Argument Error. The argument 'ClientCtrl' is not defined as a function, it is currently undefined

It's perfectly fine to use CSS href online, but when attempting to download the CSS file and use it locally, it doesn't seem to

Why does my Bootstrap 4 grid column seem to be devouring the rest of the columns?

What causes the disparity between Chrome's print preview and printed output? [HTML - CSS]

Transform audio data URI string into a downloadable file

The peculiar characteristics of border-radius

Discover the contents within #document utilizing PUPPETEER

The local() function in CSS @font-face is limited to finding only the "regular" and "bold" font styles, not others

Is anyone experiencing difficulties with IOS 8.3 when trying to assign colors to Font Awesome icons using content?

Troublesome Display of Badges in Bootstrap 5

Guide on reusing javascript to toggle between image sources

Creating an unordered list (ul) with list items (li) that extend the full width

The issue arises from the fact that the Bootstrap modal fails to open automatically

Having trouble toggling journal entries in an HTML journal? The Jquery function might not be working properly

What is the best way to select the child of the second-to-last child?