Create 2 columns in mobile version!

angelinstoev

Hi,

please help me to create 2 columns in category and products in mobile version! In this moment is only one... I try but 🙂

Thank you!

saguaros

Hi angelinstoev

It may require some customization, let me check if it can be done.

angelinstoev

saguaros

OK, how can I help?

saguaros

You can try to use this custom css:

@media only screen and (max-width:640px) {
.browse-view .row > div,
.category-view .row > div {
    clear: none;
    float: left !important;
    width: 50% !important;
}

.horizontal-separator {
    clear: both;
}
}

angelinstoev

Where exactly should i put it! I put it in these places, but it didn't work!

templates/gk_storebox/css/mobile.css
templates/gk_storebox/css/tablet.css

saguaros

angelinstoev

If you don't have much custom css, you can put into the custom css code field in template.

Or you can enable css override option in template and put custom css code into the file: /templates/gk_storebox/css/override.css

You can find more info here: https://www.gavick.com/documentation/joomla/templates/customization/custom-template-css

angelinstoev

Thank you, it worked! But at the moment I have 2 columns, but on 1 row I have 2 categories, on 2 rows I have 1 category, on 3 rows I have two and so on! I would like to have 2 categories / products on each line.

saguaros

angelinstoev I guess you're settings to show 3 products/categories per row so that when adding css to show 2 items side by side, the one left will display in a single line like that.

angelinstoev

Isn't there a solution to have 3 columns on the desktop and 2 on the mobile
saguaros

saguaros

angelinstoev

Unfortunately, Virtuemart doesn't support this option yet, a simple way is that instead of setting 3 items per row, you can try to show 4 items per row.

It will show 4 items per row on desktop and with above custom css, it will show 2 items per row on mobile. It will look better.