Minor issue i noticed

Just my opinion the navigation look better before the change. Something looks different...

Just a small observation: if you look at the screenshot, the arrow next to “Community Help” seems to be slightly misaligned. It’s a minor CSS issue, but I thought I’d point it out.

Also, just an FYI, I’ve been going through the Zen Cart site during my downtime and whenever I have a chance. I can see that things are getting better, and I understand this is a big project that takes time and effort.

So, please don’t take any of my CSS feedback personally. I’m simply trying to help where I can and contribute to making Zen Cart great again. I appreciate all the hard work you guys are putting into it, and I’m just hoping my observations can help make the site even better!

🙁 Keep it up! More eyes find more stuff.

The arrow is animated - it changes on hover - does that make a difference?

what happened, here. Is this a mistake?

When working with images, you need to be careful with fixed width and height attributes, especially when using Flex box. Setting both dimensions explicitly can cause images to appear stretched or distorted if the CSS doesn't account for their original aspect ratio like the image above. Let the CSS do its job!

It seems that most, if not all, of the images in the Zen Cart forum are being distorted by the current Flexbox layout. Just look at the image above.

That's why i always recommend to test before going live. That would have been easy to spot.

The fix is simple: remove the unnecessary fixed width and height attributes and let the CSS handle the sizing. This will allow the images to maintain their proper proportions while Flexbox manages the layout.

I would also recommend restoring the main logo. It's part of the brand identity, and there's no need to change it just because the screen size gets smaller. The logo should remain consistent across devices, with the layout adapting to the screen size rather than changing the brand itself.

***Just remove all the width and heights from all your images and you should be good to go. Or remove the flex and go with block.

chadlly2003:

what happened, here. Is this a mistake?

When working with images, you need to be careful with fixed width and height attributes, especially when using Flex box. Setting both dimensions explicitly can cause images to appear stretched or distorted if the CSS doesn't account for their original aspect ratio like the image above. Let the CSS do its job!

It seems that most, if not all, of the images in the Zen Cart forum are being distorted by the current Flexbox layout. Just look at the image above.

That's why i always recommend to test before going live. That would have been easy to spot.

The fix is simple: remove the unnecessary fixed width and height attributes and let the CSS handle the sizing. This will allow the images to maintain their proper proportions while Flexbox manages the layout.

I would also recommend restoring the main logo. It's part of the brand identity, and there's no need to change it just because the screen size gets smaller. The logo should remain consistent across devices, with the layout adapting to the screen size rather than changing the brand itself.

***Just remove all the width and heights from all your images and you should be good to go. Or remove the flex and go with block.

Hmm this is interesting....

If you remove the styles from the element you will see the arrow show up on the right -- see attach image. Which is align correctly.

But something is telling me to look into the javascript before trying to change the css. That hidden arrow might be the cause of the misalignment.

chadlly2003:

chadlly2003:

what happened, here. Is this a mistake?

When working with images, you need to be careful with fixed width and height attributes, especially when using Flex box. Setting both dimensions explicitly can cause images to appear stretched or distorted if the CSS doesn't account for their original aspect ratio like the image above. Let the CSS do its job!

It seems that most, if not all, of the images in the Zen Cart forum are being distorted by the current Flexbox layout. Just look at the image above.

That's why i always recommend to test before going live. That would have been easy to spot.

The fix is simple: remove the unnecessary fixed width and height attributes and let the CSS handle the sizing. This will allow the images to maintain their proper proportions while Flexbox manages the layout.

I would also recommend restoring the main logo. It's part of the brand identity, and there's no need to change it just because the screen size gets smaller. The logo should remain consistent across devices, with the layout adapting to the screen size rather than changing the brand itself.

***Just remove all the width and heights from all your images and you should be good to go. Or remove the flex and go with block.

Hmm this is interesting....

If you remove the styles from the element you will see the arrow show up on the right -- see attach image. Which is align correctly.

But something is telling me to look into the javascript before trying to change the css. That hidden arrow might be the cause of the misalignment.

add this to the bottom of your css. Test before implementing. This should work

.group:not([open], :popover-open, :open) .group-open\:rotate-180 {
  transform: rotate(0deg);
  margin-top: -6px;
  
}

.group:is([open], :popover-open, :open) .group-open\:rotate-180 {
   transform: rotate(0deg);
  margin-top: 6px;
 
}