CSS problems on the site affecting the display of product images

Question

CSS problems on the site affecting the display of product images

I am currently working on a website where the homepage is functioning well, except for one issue: the images in a specific section should display 4 in a row. However, the CSS is not aligning them properly. When I try using float: left to force the alignment, the hover effect only works on the first four products and not all of them.

Here is the link to the website:

Attached is a screenshot highlighting the area of concern:

https://i.sstatic.net/z0mPl.png

I also created a Loom video demonstrating the issue, where I attempted to use float but found that the hover effect was only functioning on the first row, not on subsequent rows:

https://www.useloom.com/share/55327cbb265743f39c2c442c029277e0

jquery html css

Answer 1

Answer №1

If you found the following solution useful:

Modify the css for the project-post class.

Apply the following css code:

.masonry.four-col .project-post {
    width: 24.84%;
    display: inline-block;
}

We hope this solution meets your needs.

Answer 2

If you found the following solution useful:

Modify the css for the project-post class.

Apply the following css code:

.masonry.four-col .project-post {
    width: 24.84%;
    display: inline-block;
}

We hope this solution meets your needs.

Answer 3

Answer №2

Here is a helpful snippet:

.grid-layout.four-column .item-post {
    width: 24.98%;
    display: inline-block;
}

Answer 4

Here is a helpful snippet:

.grid-layout.four-column .item-post {
    width: 24.98%;
    display: inline-block;
}

CSS problems on the site affecting the display of product images

Answer №1

Answer №2

Similar questions

Setting the height of columns in a Bootstrap panel to 100%

The Ajax dropdown is failing to display any results

Can PurgeCSS be implemented with Next.js and module.scss files?

I keep receiving an error in Angular JS but I'm unsure of the reason

Managing iframe scrolling using the parent window's scrollbar

Ways to set Material UI tabs as active exclusively for particular URLs

Sliding Up Transition Effect for Footer with JQuery or CSS3

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

Adding plain HTML using jQuery can be done using the `.after()` and `.before()` methods

Javascript Error: Attempting to setAttributeNode on a checkbox that is invalid

Transform the result string into a JavaScript array

Enhance your Facebook sharing by including unique element IDs as hashes in PHP code

Instead of relying on a button click to trigger a script, set up the script to load automatically when inputs are detected

What should I name my Bootstrap Modal ID to ensure AdBlock Plus blocks it?

The tweet button feature does not give users the ability to make changes to the content

Increase visibility, decrease visibility by utilizing ng-hide/ng-show and functions

Successful submission of Ajax form, however, email was not received

To view the element when the browser is not in full screen mode, the body overflow (both horizontally and vertically) can be used instead of resizing

Applying the second style sheet in the child template to customize style attributes and override existing

Connect an ajax request to a link_to tag