FAQ On Design Roadblocks
This article will cover some common roadblocks that some coders/designers may or may not encounter when working with some of the E-Commerce templates and how to fix them.
Roadblock - Product Boxes Height
Sometimes when using different product listing templates and messing with CSS throughout the website you may noticed that sometimes your product boxes on the Products Listing Page sometimes do not match up with the rest fo the boxes. See image below:
We can see the height does not match the rest of the boxes. To correct this, we will need to look at the CSS.
Right clicking the product box and scrolling down to hit “Inspect element” is a very helpful tool that most browsers provide. This will make things easier on you as a designer to find and correct many errors or issues.
So we can see that this element is named “CategoryListBoxContents” and it is also listing which style sheet it is being called from. So now we can go directly to that file so we can make some changes.
After adding a height to the element, we now see that all of the product boxes are centered. The only thing that needs to be fixed now is alignment which can be discussed in the next road block.
Roadblock - Product Boxes Alignment
After fixing the height issue with our product boxes, we noticed that some of them do not align properly. Such as the shirt product in our example for the height issue.
So to fix this we need to again look at the CSS.
From here it can be a bit trial and error but you want to focus on pinpointing the content within this product box.
Upon investigating we noticed one of this elements is using “inline-block”. When we remove this line of code, lets see what happens.
This element still uses Float in the CSS so it will be alright to remove the “inline-block” so the box finally looks aligned correctly.
NOTES:
Always test a change like this throughout the entire website and in mobiel to make sure things still works correctly and that removing the inline-block from the CSS has not put something out of place.
If this doesn’t work, usually making sure the Margins in the CSS are set to auto on both the left and right side also fixes this issue.
