XSsmal Responsive Layout 2 products to the same line

mkasservice

Hello
I have the ja_shoe template. Can I make ONLY on xsmal Responsive Layout 2 products to the same line ( not one ) and all other resolutions will be work default for virtue Mart setting.
And please if it is possible show me.
Best Regards

bogdan-tofan

interested too …

saguaros

You can try this custom CSS:

@media (max-width: 991px){
div[class*="-view"] .vm-col.product {
    width: 50% !important;
}}

bogdan-tofan

it's working, but there is a problem now with the products show on tabs where is set to be listed one by one in mobile, but the css shrinks the column of that one product listed in tabs in homepage. ... can please take a look how to make it show corectly in tabs in fronpage on XSmall mobile view ?

Thank you

saguaros

bogdan-tofan Could you share the login info of your site and URL of that page?

bogdan-tofan

… I develope it on ip on host …

saguaros

bogdan-tofan You can share me the backup of your site, I will check in my local.

bogdan-tofan

saguaros I’ve put it on test on www.laraft.ro , check it on xm mobile . thank you

cssyeah

bogdan-tofan

Please try to update the custom css rules:

@media (max-width: 991px){
div[class*="-view"] .row .vm-col.product {
    width: 50% !important;
}}

I have tried to test on your website and it worked fine.

Regards,

bogdan-tofan

cssyeah that's almost perfect ... BUT ... on listings in shop if the listed product custom fields are long, the text don't split as it should

. take a look and advice ! ... Thank you in advance !

P.S.1 there is another css issue with the language flags swich, where in the dedicated position for the module don't show in line with cart and off-canvas menu ...

( I think the programmers forget to check in template the module in that position ) ...

P.S. 2 ( how can I add you as friend ? 🙂 ... to please you guide in future for some custom css need it )

saguaros

bogdan-tofan on listings in shop if the listed product custom fields are long, the text don't split as it should

You can try this:

@media (max-width: 991px){
.vm-customfields-wrap .product-fields .product-field .product-field-display .controls .form-check label {
    display: initial;
}
}

About the flags, I replied you in another ticket, kindly follow it 🙂

bogdan-tofan

working ogreat now ! ... BUT 🙂 ... the ADD TO CART buton is a litle bit moved in right when custom fields are in products listed. could you take a look and advice ?

phinb

Hi @bogdan-tofan

On mobile devices you might want to reduce the space between products when using 2 columns to make it more compact. You can try using the following style to reduce the space and align the "add to cart" button to the left:

@media (max-width: 991px) {
	div[class*="-view"] .vm-col.product .spacer {
		padding: 20px 15px;
	}

	div[class*="-view"] .vm-col.product .spacer .addtocart-bar {
		text-align: left;
	}
}

Kindly check and let us know if you need further help. 🙂

bogdan-tofan

phinb it seams ok add cart now but something is wrong with stock info box near it.

phinb

Hi @bogdan-tofan

You can try this to align stock info to the left:

@media (max-width: 991px) {
	div[class*="-view"] .vm-product-footer .vmicon {
		float: left;
		margin-left: 0;
		margin-top: 5px
	}
}

bogdan-tofan

phinb if you could help me to reduce the gap betwen description and add to cart buton on products without custom fields will be just perfect ! Thank you for your kind support !

phinb

Hi @bogdan-tofan

You can try this:

@media (max-width: 991px) {
	div[class*="-view"] .product_s_desc + .vm-product-footer {
		margin-top: 15px
	}
}

Regards,