Hello,
I have a weird issue with some vertical and horizontal alignment on my website. If you take a look at
www.mixnob.com and look at the section at the bottom of the page where there are three tabs for FEATURED, ON SALE, and NEW products. There are four products across the page. Each product has a picture, and then the text below. So each of those four products should all align the same.
The problem is whenever I go to the home page, some of the images are aligned left, instead of center, and some of the images that are wider than they are tall will pull up the text below them so the ADD TO CART button is not aligned to the bottom.
But where it gets really weird is when I hit refresh on my browser, everything snaps into alignment correctly. So it seems the actual css is correct but only takes effect when the page has been refreshed. But the first time you go to the page, things are randomly out of alignment.
I have played around with the !important tag to try and force the css that is already there to take action but it sometimes doesn't seem to be working. I just want all four products to look the same. All ADD TO CART buttons should align to bottom, all images should be centered horizontally, and all images should be centered vertically as well.
Any help with this would be appreciated as I have pulled my hair out trying to get this to work correctly.
Thanks