I got 3 columns in main shop but only 1 in categories and subcategories

Hi there @marioscomco,

Thanks for reaching out to us about the columns and CSS code on your Storefront site!

And the suggested codes from user Senff for 2, 3 or 4 columns don’t work, they make the columns spaces but only the far most left shows, the rest is just blank

I slightly modified it to width: 32% and it shows 3 columns right
BUT ONLY FOR MAIN SHOP PAGE, as soon as I open a category or subcategory it’s stock 1 column

Have any changes been made to the code since you posted this topic?

The reason I’m asking that is because I see 4 columns on both the homepage and Oro category page, for example:

Homepage screenshot:

Link to image: https://d.pr/i/npr7lj

Category page screenshot:

Link to image: https://d.pr/i/lNzoN8

Also, thanks to a developer I got these codes to: 1. Remove “add to cart” button, 2. Reduce vertical spacing between items, I just wanted to share to see if you had any opinion on this, thanks!

The code seem to be okay, though I don’t think it’d be necessary to got that deep in terms of the CSS selectors used.

Also, what’s the reason you’d like to remove the add to cart button? I’m assuming you just don’t want the button displaying on the homepage and shop category pages, right?

Hi Niall, thank you very much for your response, I forgot to mention something crucial and it’s that I’m talking specifically about the mobile version, only main shop shows 2 or 3 columns but not categories and subcategories. I’m happy with the web version, as I know that the stock storefront customizer let’s you set columns and rows

About the other codes, I’m not using them anymore as I bought the Storefront Powerpack and you know it lets you customize many things like removing the add to cart button but I was disappointed that I thought it would let me customize the number of columns on mobile but it doesn’t

I’m yet to find a way to accomplish this. If someone could give me the right code please, it’d be great, thank you very much in advance!

Hi there,

Thanks for getting back to us!

I understand that you would like to change the layout of the shop/home page and category/tags page. So it shows 2 or 3 columns on mobile.

Can you please try to use the following CSS code for that (this code will apply on shop/home and category pages)

@media screen and (max-width: 500px) {
  .archive .site-main .products .product {
    float: left;
    width: 30%;
  }
 .archive .site-main .products .product h2.woocommerce-loop-product__title {
    min-height: 45px;
 } 
}

This is how it’s showing after adding the above code:

I hope it helps!

Best,

Hi Daniyal, thank you for that code but I’m still having troubles with this. Honestly I’m getting kinda tired with this to the point that I’m considering moving my site to another builder. With that code it shows correctly in both main shop, catégories and subcategories but only sometimes and in some phones.

I reckon that I talked about having three columns but now that I think of it, it might be too “crowded” with 3 columns. I think I would prefer two columns but if it would work correctly every time in every phone.

Can you please help me with the code for two columns but one that would work everytime? Honestly I find it incredible that something so simple as having multiple columns in mobile view would be so complicated.

I feel like I want to quit

Facebook and Instagram Shopping is default 2 columns

Nevermind nevermind!!! I don’t know if it was like the page needed the cache to be purged, all I was testing was from my phone which is a S7 Edge, but now that I’ve tried again from laptop, now it seems to work fine on all phones.

I’m using this mobile view simulator:

https://chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk

And it seems just fine. I’m very happy with this but I would also like the code for two columns, and one last thing, how can I bring the price closer to the item title? I’ve tried with the storefront powerpack without success, or am I missing something obvious?

THANK YOU SO MUCH!!!!!!!!!!!

Hi again,

And it seems just fine. I’m very happy with this but I would also like the code for two columns, and one last thing, how can I bring the price closer to the item title?

For two columns you can try:

@media only screen and (max-width: 500px)
.archive .site-main .products .product {
    width: 46%;
}

Price:

@media screen and (max-width: 500px)
.archive .site-main .products .product h2.woocommerce-loop-product__title {
    min-height: 5px;
}

Kind regards,

Hi @conschneider thank you for your reply but your suggested code for two columns didn’t work at all yet I used the info on it to mix it with @daniyalahmedk by replacing @daniyalahmedk with the “width:46%” from your code, purged cache with LiteSpeed Cache plugin and now looking in two columns correctly. Tested with mobile view simulator and looking fine

About the distance between the item picture and the title and price, I found out with the powerpack settings that Loop Product Image had a big bottom margin, reduced it to 0px and looking great now, guys I am SO greatful with you, srsly thank you so much, I was about to surrender.

I have one last question if anybody knows, I’m yet to find how to reduce the distance between category/subcategory picture with its title, I’d update a pic but don’t know how

Thanks!

Hey there, @marioscomco!

Hi @conschneider thank you for your reply but your suggested code for two columns didn’t work at all yet I used the info on it to mix it with @daniyalahmedk by replacing @daniyalahmedk with the “width:46%” from your code, purged cache with LiteSpeed Cache plugin and now looking in two columns correctly. Tested with mobile view simulator and looking fine

About the distance between the item picture and the title and price, I found out with the powerpack settings that Loop Product Image had a big bottom margin, reduced it to 0px and looking great now, guys I am SO greatful with you, srsly thank you so much, I was about to surrender.

Thanks for the update, here! I’m certain that my colleagues appreciate knowing that together we were able to assist you with getting that code snippet to work correctly.

I have one last question if anybody knows, I’m yet to find how to reduce the distance between category/subcategory picture with its title, I’d update a pic but don’t know how.

Hmm, I definitely want to be certain before we send any more code your way, but please let me know if this is the area you’re looking to reduce space in:

https://snipboard.io/TnSGNQ.jpg

If you’re having trouble pasting images here, and need to in order to clarify your request, feel free to send us screenshots using a service like SnipBoard.io where you can send us URLs of your images, as I’ve done for you above. ??

We look forward to hearing back from you!

• This reply was modified 2 years, 8 months ago by thelogicwizard.
• This reply was modified 2 years, 8 months ago by James Huff.

Hi @marioscomco,

Hope the spacing is now reduced on the site! We haven’t heard back from you for a while, so I’m going to mark this post as resolved.

If you need any further help here, please let us know. Or, if you need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there.

Thank you!

Hi, thank you for all the help so far, I still don’t understand why something as simple as setting up the columns for mobile view would be so complicated, I thought it was gonna be included in the Powerpack. Disappoint

So, now I have this problem that I’m trying to add a pics slider called MetaSlider to my homepage but I noticed even though I choose it to show full width, in desktop, it shows small and thrown to the left, in mobile it shows center but still small, not full width.

I know on the right pane of page edit there is “templates” and when I change the homescreen template to full width, it fixes and the slider shows full width in both mobile and desktop but then I lose the features of Storefront’s homepage, like main categories with cover picture, plus the ability to edit the homepage a lot with the included powerpack edition

Btw the slider shows small and thrown left only when viewing it from public view, but in the page editor, it shows correctly full width even with “homepage” template

I’m yet to understand why such simple things have to be so complicated. Like, the Powerpack “designer” feature is very buggy, you have to hover the mouse over something many times to see if it MIGHT highlight what you’re looking for and hopefully click on the 1-3px valid frame to select it or have to remove cursor and try again, many times. And this is PAID stuff

• This reply was modified 2 years, 7 months ago by Bastian Suivera.

Hello @marioscomco ,

So, now I have this problem that I’m trying to add a pics slider called MetaSlider to my homepage but I noticed even though I choose it to show full width, in desktop, it shows small and thrown to the left, in mobile it shows center but still small, not full width.

Metaslider is not one of our products so we are not exactly sure how you can make it full-width. It would be wise to contact the developers of the Metaslider developers to see if it needs additional settings to make it full-width.

I’m yet to understand why such simple things have to be so complicated. Like, the Powerpack “designer” feature is very buggy, you have to hover the mouse over something many times to see if it MIGHT highlight what you’re looking for and hopefully click on the 1-3px valid frame to select it or have to remove cursor and try again, many times. And this is PAID stuff

I understand you feel some expected features are missing with Storefront Powerpack. This forum is specifically for the free theme Storefront.

I recommend you to create a ticket in WooCommerce.com so that we can discuss the problems with Powerpack.

Thank you.