2 Replies Latest reply: Oct 13, 2014 3:22 AM by Mahendran RSS

    Product Large layout issue on mobiles

    Mahendran Community Member

      My products Large page is staggered on Mobiles and can not shop, but it is ok on normal browsers. Can some one help?

      the page : Any products : 50 Ezywipes with a carry Tube

      the issue ( responsive?) Dropbox - for BC.JPG

      Current Online shop layout - Individual product -Large HTML :

      <div class="shop-left col-lg-5 col-md-5 col-sm-12">

      <div class="product1">

      <div class="ImageWrapper">

      {tag_largeimage}

      </div>

      <!-- ImageWrapper -->

      </div>

      <!-- end product1 -->

      <div class="thumbnails clearfix">

      {tag_poplets}

      </div>

      </div>

      <!-- shop-left -->

      <div class="shop-right col-lg-7 col-md-7 col-sm-12">

      <div class="product_title title">

      <h3>{tag_name}</h3>

      </div>

      <div class="product-price">{tag_saleprice}</div>

      {tag_description}</div>

      <div class="shop-right col-lg-7 col-md-7 col-sm-12">Rating: {module_ratingrank}<br />

      <div class="quantity">Qty: <strong>{tag_addtocartinputfield}</strong></div>

      <div class="price-detail">{tag_addtocart}<br />

      </div>

      <div class="price-detail">{tag_attributes}<br />

      </div>

      <!-- row -->

      </div>

      <!-- shop right -->

      <div class="clearfix"></div>

      <hr />

      <div class="row">

      <div class="shop-right col-lg-7 col-md-7 col-sm-12">

      <div class="product-details-wrap">

      <ul id="myTab" class="nav nav-tabs">

          <li><a href="#more-info" data-toggle="tab">More info</a></li>

          <li class="active"><a href="#review" data-toggle="tab">Review</a>

          </li>

      </ul>

      <hr />

      <div class="clear"></div>

      <div id="myTabContent" class="tab-content">

      <div class="tab-pane fade active in" id="more-info">

      {tag_productmetadescription}</div>

      <div class="tab-pane fade active in" id="more-info"><br />

      </div>

      <div class="tab-pane active" id="review">

      <h3>What others say about this product</h3>

      <div>{module_ratingfeedback}<br />

      </div>

      <div><br />

      </div>

      <h3>Tell us what you think</h3>

      <form name="catratingform26849" onsubmit="return checkWholeForm26849(this)" method="post" action="/RatingProcess.aspx?OID={module_oid}&amp;OTYPE={module_otype}">

          <div class="form">

          <div class="item"><label>How much you like this product?</label><br />

          OK <input type="radio" name="Rating" value="1" /><input type="radio" name="Rating" value="2" /><input type="radio" name="Rating" checked="checked" value="3" /><input type="radio" name="Rating" value="4" /><input type="radio" name="Rating" value="5" />Very Good</div>

          <div class="item"><label id="RFeedback">Do you have feedback? (Optional)</label><br />

          <textarea class="comment" name="Feedback" id="RFeedback" cols="10" rows="4"></textarea></div>

          <div class="item"><label id="RFullName">Name (Optional)</label><br />

          <input class="cat_textbox_small" type="text" name="FullName" id="RFullName" maxlength="255" /></div>

          <div class="item"><label id="RWebsite">Website (Optional)</label><br />

          <input class="cat_textbox_small" type="text" name="Website" id="RWebsite" maxlength="255" /></div>

          <div class="item"><label id="REmailAddress">Email Address (Optional)</label><br />

          <input class="cat_textbox_small" type="text" name="EmailAddress" id="REmailAddress" maxlength="255" /></div>

          <div class="item"><label>Enter Word Verification in box below &bull;</label><br />

          {module_captchav2}</div>

          <div class="item"><input class="cat_button" type="submit" value="Submit" /></div>

          </div>

      </form>

      </div>

      </div>

      </div>

      <div class="title1">

      <h3></h3>

      <h3>RELATED ITEMS</h3>

      <hr />

      <p class="lead">{tag_relatedproducts,2}</p>

      </div>

      </div>

      </div>

      <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>

      <script type="text/javascript">

      //<![CDATA[

      function checkWholeForm26849(theForm){var why = "";if (theForm.EmailAddress) if (theForm.EmailAddress.value.length > 0) why += checkEmail(theForm.EmailAddress.value);if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image"); if (why != ""){alert(why);return false;}theForm.submit();return false;}

      //]]>

      </script>

      <script type="text/javascript">

          $( ".catProdAttributeItem select" ).addClass( "form-control" );

          $( ".productPopletsItem a img" ).addClass( "img-thumbnail" );  

          $( "table.productTable .productItem" ).addClass( "col-lg-4 col-md-4 col-sm-4 col-xs-12 grid cs-style-4" ); 

          $( ".price-detail .productSubmitInput" ).addClass( "productSubmitInput btn btn-darkblue" );

      </script>

       

       

      Thank you all in advance!!