Mobile site and Woocommerce

Support Area Forums Elite Mobile site and Woocommerce

Viewing 2 posts - 1 through 2 (of 2 total)
URL to the page in question: http://http://www.eroue.fr/e-boutique/
  • Author
    Posts
  • #33749
    Thomas Graindorge
    Participant

    Hi !

    On the mobile version of my website : http://www.eroue.fr/e-boutique/ the purchase buttons are cut. Moreover, at the checkout some informations are cut.

    The problem occurs on smartphones, do you know how to fix it ?

    Thanks !!!

    #33766
    Bill Robbins
    Moderator

    Good Morning Thomas,

    Let’s see if we can handle the wrapping on those buttons and inputs this way:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      .woocommerce #content ul.products li.product a.button,
      .woocommerce-page #content ul.products li.product a.button {
      	font-size: 12px;
      	white-space: nowrap;
      	padding-right: 10px;
      	padding-left: 10px;
      }
      
      @media only screen and (min-width: 768px) and (max-width: 1199px) {
      
      	.woocommerce #content ul.products li.product a.button,
      	.woocommerce-page #content ul.products li.product a.button {
      		margin-left: 0;
      		margin-bottom: -11px;
      		white-space: normal;
      		width: 100% !important;
      		display: block;
      		text-align: center;
      	}
      
      }
      
      @media only screen and (max-width: 767px) {
      	
      	.coupon input,
      	td.actions input {
      		width: 100% !important;
      		display: block;
      		float: none;
      	}
      	
      	input#coupon_code {
      		margin-bottom: 8px !important;
      	}
      
      }
      
    3. Update your settings.

    Let me know how that goes.

    Take care,
    Bill

Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Mobile site and Woocommerce’ is closed to new replies.