Happy New Year! Enjoy 30% OFF 🎄
Coupon Code: XMAS30 - Renew: XMAS_RENEW30

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

Hi

You can try this custom CSS:

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

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

    7 days later

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

      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,

        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 )

          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 🙂

          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 ?

          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. 🙂

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

            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
            	}
            }

              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 !

              Hi @bogdan-tofan

              You can try this:

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

              Regards,

              Write a Reply...
              You need to Login to view replies.