Joomla Templates Club 406,261 posts

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1024488

Hi
Add below code in /css/custom.css file

@media(max-width: 468px){
.com_virtuemart div[class*="-view"] .row div.product {
    width: 46%!important;
    float: left;
    height: auto;
}
.com_virtuemart div[class*="-view"] .row {display: -webkit-box!important;}
}

Please note it will make them in two columns and in mobile the space is not enough to display two items.

Regards

[sky Friend skyJoin date: May 2006Posts: 283Downloads:37Uploads:2 Thanked: 1 times in 1 posts]

#1024502

in order to have more space, need to make each product box width smaller. maybe showing 4 columns in desktop and 2 coloumns in mobile. how to do that?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1024504

You can decrease the width value in above if you want to reduce the width.

Regards

[sky Friend skyJoin date: May 2006Posts: 283Downloads:37Uploads:2 Thanked: 1 times in 1 posts]

#1024507

I changed to 30%, but there is no change on the mobile view. still not enough space.

@media(max-width: 468px){ .com_virtuemart div[class*="-view"] .row div.product { width: 30%!important; float: left; height: auto; }

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1024511

Yes
Thats why i already said in last threads , in mobile screen space is very small, and product does not fit well. I suggest you to use product full width as it was before. Regards

[sky Friend skyJoin date: May 2006Posts: 283Downloads:37Uploads:2 Thanked: 1 times in 1 posts]

#1024655

I am sorry, but we must have 2 columns for that.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1024661

Hi
You can use my suggestion given Here to get two columns.
There is no other way as the mobile view is small and you can’t fit two items without compromise in the style.

[sky Friend skyJoin date: May 2006Posts: 283Downloads:37Uploads:2 Thanked: 1 times in 1 posts]

#1024667

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1024668

sky wrote:

http://cowcowkidsmo.com/%E5%AA%BD%E5%92%AA%E8%AD%B7%E7%90%86%E7%94%A8%E5%93%81%5B/quote]

Hi
For height add below code in custom.css file and set a min-height as per needs

@media(max-width:468px){
.com_virtuemart div[class*="-view"] .row .vm-col .spacer {
min-height:500px;}}

[sky Friend skyJoin date: May 2006Posts: 283Downloads:37Uploads:2 Thanked: 1 times in 1 posts]

#1024678

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1024845

Hi
If you will show a product in less area there can be a style issue, that will come as i already mentioned above. I am afraid that this is something that will not change. Its simply if you will fit 50px in 10px are it does not fit well.

[sky Friend skyJoin date: May 2006Posts: 283Downloads:37Uploads:2 Thanked: 1 times in 1 posts]

#1025484

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1025501

Hi
The products use 3 columns layout and follow the same for the mobile.
You can add a min-width for product and use the same code.

@media(max-width: 468px){
.com_virtuemart div[class*="-view"] .row div.product {
    width: 30%!important;
    float: left;
    height: auto;
    min-width: 50%;
}

.com_virtuemart div[class*="-view"] .row {display: -webkit-box!important;overflow: visible;max-width: 100%;}
}

Either use 1 column in mobile o r 3 column.
this is all i can suggest in the available options.

Hope its clear now.

[sky Friend skyJoin date: May 2006Posts: 283Downloads:37Uploads:2 Thanked: 1 times in 1 posts]

#1025502

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1025506

Hi
Please read my suggestion given Here carefully to understand how its working.

Regards

[Author]

Posts