- This topic has 3 replies, 2 voices, and was last updated 6 years, 8 months ago by
.
Hey there,
I’ve been building out my site and got all the products up on the homepage with the recent products shortcode. When the window is fullscreen, all the products show up in properly aligned rows of 4. When the window is more narrow, the alignment goes all out of whack and there are rows with one product, rows with two products, etc.
Why is this happening and how do I get it to maintain properly aligned rows no matter the screen size?
The website is Youwishyouhadthis.com If you change the window size, you should be able to see what I am referring to.
Additionally, is there a way to get the woocommerce bubble filter to only display parent categories? As I add new categories it just keeps on getting more crowded.
Lastly, on the shop page, is there a way to maintain alignment, even with different product title lengths? I want the top and bottom of every item to be aligned and see no options to do that.
Thanks in advance for the help.
I hope you are well today and thank you for your questions.
I’ve been building out my site and got all the products up on the homepage with the recent products shortcode. When the window is fullscreen, all the products show up in properly aligned rows of 4. When the window is more narrow, the alignment goes all out of whack and there are rows with one product, rows with two products, etc.
Why is this happening and how do I get it to maintain properly aligned rows no matter the screen size?
You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-woocommerce-products .woocommerce ul.products li.first { clear: both!important; }To help us keep support thread separates could you please create new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you on your new thread.
Best regards,
Shufflehound teamI am still seeing the same issue. When the screen is resized to be more narrow, and can no longer fit 4 columns of products, instead changing to rows of 3, it changes into random uneven rows, each row with a different number of products.
Then please remove the above shared code from your site and instead use the below shared CSS code.
.sh-woocommerce-products .woocommerce ul.products li.product { min-height: 420px; }
