This topic has 18 replies, 2 voices, and was last updated 8 years by 
-
-
When I set my “Shop Products Columns” setting in theme Options – > woocommerce, I always get one less in the row, and its like it word wraps the next product on row 2. And then starts another row.
For example, if I set the option to 5, then it looks like (* represents a product)
* * * *
*
* * * *
*If I set it to 4, it looks like:
* * *
*
* * *
*Any ideas how to fix? Thanks
Hi,
This can be a padding issue ? or who knows ? please provide page url to take a look
Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHi,
Yes
Add this css to wp-admin -> theme options -> general settings -> quick css
COPY CODE.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { margin-right: 0px !important; }Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHi, I tried that and it did put the right number of products in each row. However, is there a solution where I can create space of 4px or so between the products?
When I tried to add to add padding, then it kicks down the last product to next row.
Add this and then set margin-right for li’s 4 px
COPY CODE.kleo-shop-cols-5 li.product, .kleo-shop-5 li.product, .woocommerce.columns-5 li.product { width: 19.5%; }Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionYou’re welcome
Don’t forget to rate our theme 5 stars on Themeforest since it will really help us.
Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionHi,
1. You will have apply this css
COPY CODE@media(max-width:700px) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;} .woocommerce ul.products li.product figure figcaption {display:none !important; } }We cannot have same behavior on mobile as on the desktop because the informations (sold by etc..) are visible on mouse hover on the mobile devices we don’t have a mouse, in this case i’ve hidden these only on mobile with the provided css second line
It’s ok ?
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionGreat, that fixed it on the mobile phone view, for either orientation. I have 2 per row and mouse hover info does not show.
How do I turn off the mouse hover info when viewing on the IPAD in Portrait orientation?
When holding the Ipad in landscape orientation, the mouse hover info is not there, looks good. When I rotate it to portrait orientation, then it automatically appears on all products.
Hi,
Please replace the css with this
COPY CODE@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;} .woocommerce ul.products li.product figure figcaption {display:none !important; } }Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionKept both of the last two CSS recommendations and “sold by” popup is hidden for mobile and ipad, everything looks great except when in portrait mode on IPAD, the shop page is displaying products like this
**
*
**
*
**
*instead of 2 every row.
IPAD Landscape mode shows 4 per row…correct
Mobile phone shows 2 per row in either orientation…correct
desktop mode shows 4 per row….correctHi,
Replace the css provided to you earlier with this
COPY CODE@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;} .woocommerce ul.products li.product figure figcaption {display:none !important; } .woocommerce ul.products li.product:nth-of-type(2n+1) {clear:both; } .woocommerce ul.products li.product:nth-of-type(3n+1) {clear:none; } }And let me know
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThis fixed it for the IPAD in portrait, but created the same problem for phone in landscape mode. If its too tricky, then I will just go back to previous CSS. Just let me know, thanks.
Hi,
Let’s try again with this, if this is not ok for you use the previous css
COPY CODE@media only screen and (orientation: portrait) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;} .woocommerce ul.products li.product figure figcaption {display:none !important; } .woocommerce ul.products li.product:nth-of-type(2n+1) {clear:both; } .woocommerce ul.products li.product:nth-of-type(3n+1) {clear:none; } }Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionWe can close this now, its fixed 🙂
I experimented with your code and came up using everything below that works
phone: 2 per row on portrait, 2 per row on landscape ( I added 2 lines to the first thing you gave me above)
ipad: 2 per row on portrait, 4 per row on landscape (4 per row is default in Theme options)
desktop: 4 per row@media(max-width:700px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;}
.woocommerce ul.products li.product figure figcaption {display:none !important; }.woocommerce ul.products li.product:nth-of-type(2n+1) {clear:both; }
.woocommerce ul.products li.product:nth-of-type(3n+1) {clear:none; }}
@media only screen and (orientation: portrait) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;}
.woocommerce ul.products li.product figure figcaption {display:none !important; }.woocommerce ul.products li.product:nth-of-type(2n+1) {clear:both; }
.woocommerce ul.products li.product:nth-of-type(3n+1) {clear:none; }}
Great
Have a nice week
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
The forum ‘General questions’ is closed to new topics and replies.
