Same code on homepage renders 4 across, same code on archive only renders 3 Across. What am I missing?

This page has 4 project thumbnails across:

I'm using the same classes for this one, but only 3 across:

It's driving me mad...
Alicia St RoseOwner & Principle Developer/DesignerAsked:
Who is Participating?
Flabio GatesConnect With a Mentor Commented:
if I add class="wow" to each of your <li>...</li> in this page, they render 4 thumbs per row
RobOwner (Aidellio)Commented:
You may be using the same classes but the html is different.  Without looking too far into the code, the container objects are different widths and ultimately it is the margin between the thumbnails which is different.

RobOwner (Aidellio)Commented:
the margin for those elements is based on a % of the container width.  There is an html element making the homepage wider than your sandbox
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Rock stars!! Thank you SO much!!! It was indeed the wow class. I had a float attached to it. And I need to float the archive elements. The wow class is for the animations. Don't need them on the archive. I should've attached the float to another class.
Flabio GatesCommented:
Glad to help.
Flabio GatesCommented:
Question inactive
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.